LocalStorage

	LocalStorage 是 Web 存储 API 的一部分，它允许网页在用户的浏览器中存储数据，并且这些数据在页面会话结
束后仍然保留。这意呀着，即使浏览器关闭并重新打开，存储的数据仍然可用，直到被显式删除。LocalStorage 非常
适合存储那些不需要频繁变化的数据，如用户的偏好设置、主题选择或用户会话令牌等。

一、主要特点

持久性：数据在页面刷新或浏览器关闭后仍然保留。
同源策略：每个域（包括子域）都有自己的 LocalStorage，不能跨域访问。
存储限制：大多数现代浏览器对 LocalStorage 的存储量有限制，通常是每个源（协议+域名+端口）大约 5MB。
同步 API：LocalStorage 提供的 API 是同步的，这意味着当你执行一个操作时，它会阻塞页面的其他操作直到完成。
字符串键值对：所有存储在 LocalStorage 中的数据都必须是字符串格式。如果你尝试存储其他类型的数据（如对象或数组），你需要先将它们转换成字符串格式，并在读取时转换回原始类型。

二、基本操作

1. 存储数据

LocalStorage 使用键值对的方式来存储数据，每个键值对都由一个唯一的键（key）和对应的值（value）组成。由于 LocalStorage 只能存储字符串类型的值，因此如果需要存储其他类型的数据（如对象、数组等），需要先使用 JSON.stringify() 方法将其转换为字符串格式。

示例代码：

// 存储一个字符串  
localStorage.setItem('username', 'JohnDoe');  
  
// 存储一个对象（需要先转换为字符串）  
var user = {name: 'JaneDoe', age: 30};  
localStorage.setItem('user', JSON.stringify(user))

2. 读取数据

要从 LocalStorage 中读取数据，可以使用 getItem(key) 方法。该方法接受一个键名作为参数，并返回与该键名对应的值（字符串格式）。如果存储的是对象或数组等复杂数据类型，需要使用 JSON.parse() 方法将其从字符串转换回原始数据类型。

示例代码：

// 读取并显示字符串  
var username = localStorage.getItem('username');  
console.log(username); // 输出: JohnDoe  
  
// 读取并解析对象  
var storedUser = localStorage.getItem('user');  
var user = JSON.parse(storedUser);  
console.log(user.name); // 输出: JaneDoe

3. 删除数据

可以使用 removeItem(key) 方法来删除 LocalStorage 中指定键名的数据项。如果指定的键名不存在，则该方法不会执行任何操作。

示例代码：

// 删除用户名  
localStorage.removeItem('username');

4. 清除所有数据

如果需要清除 LocalStorage 中的所有数据，可以使用 clear() 方法。该方法不接受任何参数，并会删除当前域下 LocalStorage 中的所有键值对。

示例代码：

// 清除 LocalStorage 中的所有数据  
localStorage.clear();

5. 遍历 LocalStorage

虽然 LocalStorage 没有直接提供遍历所有键值对的方法，但可以通过 length 属性和 key(index) 方法来遍历。length 属性返回 LocalStorage 中键值对的数量，而 key(index) 方法接受一个索引值（从 0 开始），并返回该索引处的键名。

示例代码：

for (var i = 0; i < localStorage.length; i++) {  
    var key = localStorage.key(i);  
    var value = localStorage.getItem(key);  
    console.log(key + ': ' + value);  
}

注意事项

LocalStorage 的存储空间有限，通常为每个源（协议+域名+端口）大约 5MB。超出限制时，将无法保存更多的数据。
LocalStorage 的数据存储在用户的浏览器中，因此任何能够访问该浏览器的人都可以查看和修改这些数据。因此，不应该在 LocalStorage 中存储敏感信息。
LocalStorage 的 API 是同步的，这意味着在执行读写操作时可能会阻塞页面的其他操作。在性能敏感的应用中，需要谨慎使用。
LocalStorage 遵循同源策略，不同域下的页面无法访问彼此的 LocalStorage 数据。