Localstorage setitem - Javascript

本文介绍了 Javascript 中的 Localstorage setitem 方法，它是 Web API 中的一部分，用于将数据存储在浏览器的 Localstorage 中。相对于 Cookie，使用 Localstorage 可以更为方便地存储大量的数据，而且不会像 Cookie 一样随着每次 HTTP 请求都被发送到服务器。

用法

存储数据

localStorage.setItem('key', 'value');

上述代码将键值对 'key': 'value' 存储到浏览器的 Localstorage 中。其中 'key' 是存储的键，'value' 是存储的值。如果已经存在同名的键，那么会覆盖之前的值。

存储的数据类型可以是字符串，也可以是对象。如果是对象类型的值，在存储之前需要将其转换成 JSON 格式，可以使用 JSON.stringify() 方法。

const obj = {name: 'Tom', age: 18};
localStorage.setItem('user', JSON.stringify(obj));

上述代码将 JavaScript 对象 {name: 'Tom', age: 18} 存储到 Localstorage 中。在存储之前，使用 JSON.stringify() 方法将其转换成了 JSON 格式的字符串。

获取数据

const value = localStorage.getItem('key');

上述代码将从 Localstorage 中获取键名为 'key' 的值，并将其赋值给变量 value。

如果获取的值是一个对象，那么需要使用 JSON.parse() 方法将其转换成 JavaScript 对象。

const user = JSON.parse(localStorage.getItem('user'));

上述代码将从 Localstorage 中获取键名为 'user' 的值，并使用 JSON.parse() 方法将其转换成 JavaScript 对象。

删除数据

localStorage.removeItem('key');

上述代码将从 Localstorage 中删除键名为 'key' 的数据。

清空数据

localStorage.clear();

上述代码将清空 Localstorage 中的所有数据。

注意事项

1. Localstorage 中存储的数据是以域名为单位进行分隔的。也就是说，来自不同域名的网站无法共享 Localstorage 中的数据。
2. Localstorage 中存储的数据是永久不过期的，除非用户在浏览器中删除了 Localstorage 中的数据。
3. Localstorage 的容量一般为 5MB 左右，不同浏览器的实际容量可能会有所不同。如果超出容量限制，存储操作将会失败。
4. 在 Safari 的隐私模式下，无法使用 Localstorage。
5. 在编写代码时，需要注意当 Localstorage 中无法存储数据时的异常处理。如果在存储数据时发生了错误，localStorage.setItem() 方法会抛出异常。
6. Localstorage 可能会因为安全因素或者用户主动清空，导致数据丢失。因此，在使用 Localstorage 进行数据存储时，建议备份数据，以避免数据的丢失。