JavaScript localStorage

localStorage 是 Web 存储 API 的一部分，它允许网站在用户的浏览器中存储数据，而无需将数据发送到服务器。与 SessionStorage 不同，localStorage 存储的数据没有过期时间，即使关闭浏览器或重启计算机，数据仍然保留。

1. 基本概念

• 持久性：localStorage 存储的数据是持久的，除非主动删除，否则数据将一直存在。
• 同源策略：localStorage 数据只能由创建它的同源（即相同的协议、域名和端口）访问。
• 存储容量：大多数现代浏览器为 localStorage 提供了至少 5MB 的存储空间。

2. 使用方法

localStorage 提供了一套简单的 API 来存储和检索数据。以下是一些常用的方法：

• localStorage.setItem(key, value)：存储数据。
• localStorage.getItem(key)：检索数据。
• localStorage.removeItem(key)：删除数据。
• localStorage.clear()：清除所有存储的数据。
• localStorage.key(index)：获取索引处的键名（不常用）。
• localStorage.length：获取存储的数据项数量。

3. 存储数据

要使用 localStorage 存储数据，你需要使用 setItem 方法。这个方法接受两个参数：一个键（key）和一个值（value）。值应该是一个字符串，如果你想要存储其他类型的数据（如对象或数组），你需要先将它们转换为字符串（通常使用 JSON.stringify）。

// 存储字符串
localStorage.setItem('username', 'JohnDoe');

// 存储对象
var user = { name: 'John Doe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

4. 检索数据

要检索存储在 localStorage 中的数据，你需要使用 getItem 方法。这个方法接受一个键作为参数，并返回与该键关联的值（作为字符串）。如果你存储的是对象或数组，你需要使用 JSON.parse 将字符串转换回原始数据类型。

// 检索字符串
var username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

// 检索对象
var user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 输出: John Doe

5. 删除数据

要删除存储在 localStorage 中的数据，你可以使用 removeItem 方法。这个方法接受一个键作为参数，并删除与该键关联的数据项。

// 删除数据
localStorage.removeItem('username');

6. 清除所有数据

要清除 localStorage 中的所有数据，你可以使用 clear 方法。这个方法不接受任何参数，并删除存储中的所有数据项。

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

7. 注意事项

• 数据安全性：localStorage 存储的数据是不加密的，因此不应存储敏感信息（如密码或信用卡号）。
• 浏览器支持：localStorage 在大多数现代浏览器中受支持，但在一些旧版浏览器或特定配置下可能不受支持。
• 存储限制：虽然大多数浏览器为 localStorage 提供了足够的存储空间，但仍然存在存储限制。如果尝试存储超过限制的数据，操作可能会失败。
• 数据同步：localStorage 数据是本地存储的，不会与服务器同步。如果你需要在多个设备或浏览器之间共享数据，你可能需要考虑使用其他存储解决方案（如服务器端数据库或第三方服务）。

通过遵循这些步骤和注意事项，你可以有效地使用 localStorage 在用户的浏览器中存储和检索数据。

本文地址：https://www.tides.cn/p_js-localstorage