localStorage

localStorage 是一个 Web API，用于在用户的浏览器中存储键值对数据。与 sessionStorage 不同的是，localStorage 中的数据没有过期时间，即使关闭浏览器后数据仍然存在，直到手动删除或清除浏览器数据为止。

以下是 localStorage API 的主要方法和使用示例：

设置数据

使用 setItem 方法向 localStorage 中存储数据。

javascript
复制代码
localStorage.setItem('key', 'value');

例如：

javascript
复制代码
localStorage.setItem('username', 'JohnDoe');

获取数据

使用 getItem 方法从 localStorage 中获取数据。

javascript
复制代码
var value = localStorage.getItem('key');

例如：

javascript复制代码var username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

删除数据

使用 removeItem 方法从 localStorage 中删除数据。

javascript
复制代码
localStorage.removeItem('key');

例如：

javascript
复制代码
localStorage.removeItem('username');

清空所有数据

使用 clear 方法清空 localStorage 中的所有数据。

javascript
复制代码
localStorage.clear();

获取存储的数据数量

使用 length 属性获取存储的数据条目数。

javascript
复制代码
var numberOfItems = localStorage.length;

迭代所有键

使用 key 方法遍历 localStorage 中所有的键。

javascript复制代码for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    console.log(key);
}

使用示例

假设我们想存储用户的首选语言设置，并在用户重新访问页面时读取该设置：

javascript复制代码// 设置用户的首选语言
localStorage.setItem('preferredLanguage', 'English');

// 在用户访问页面时读取首选语言
var preferredLanguage = localStorage.getItem('preferredLanguage');
if (preferredLanguage) {
    console.log('Preferred language is ' + preferredLanguage);
} else {
    console.log('Preferred language is not set');
}

注意事项

• localStorage 仅适用于字符串类型的数据，如果需要存储复杂数据类型，可以将数据转换为 JSON 字符串。

javascript复制代码var user = {
    name: 'John Doe',
    age: 30
};

// 存储对象数据
localStorage.setItem('user', JSON.stringify(user));

// 读取对象数据
var retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // 输出: John Doe

• localStorage 适用于存储少量数据，通常不超过 5MB（具体限制取决于浏览器）。
• localStorage 只能在同源（同协议、同域名、同端口）下访问。

使用 localStorage 能方便地在客户端存储和管理数据，但需要注意数据的安全性和隐私保护。