浏览器Local Storage的基本使用

在现代浏览器中，Local Storage（本地存储）是基于 key–value 形式的简单持久化方案，能够让你在用户浏览器中保存少量（通常 5 MB 左右）的字符串数据，即使页面刷新或浏览器重启，数据仍然保留。下面分几个方面来介绍它的使用方法和注意事项。
1. 基本 API
2. 存储对象／数组
3. 应用场景
4. 注意事项
5. 小结
📎 参考文章

在现代浏览器中，Local Storage（本地存储）是基于 key–value 形式的简单持久化方案，能够让你在用户浏览器中保存少量（通常 5 MB 左右）的字符串数据，即使页面刷新或浏览器重启，数据仍然保留。下面分几个方面来介绍它的使用方法和注意事项。#

1. 基本 API#

所有操作都通过全局对象 localStorage 来完成（与之对应的 sessionStorage 则是在浏览器会话结束后失效）：

方法	说明
`localStorage.setItem(key, value)`	保存一条值，`key` 和 `value` 都是字符串
`localStorage.getItem(key)`	读取指定 `key` 的值，若不存在则返回 `null`
`localStorage.removeItem(key)`	删除指定 `key`
`localStorage.clear()`	清空所有存储
`localStorage.key(index)`	按索引读取第 `index` 个 key（顺序由浏览器决定）
`localStorage.length`	存储条目总数

// 写入
localStorage.setItem('theme', 'dark');
localStorage.setItem('token', 'abc123');

// 读取
const theme = localStorage.getItem('theme');   // => 'dark'
const token = localStorage.getItem('token');   // => 'abc123'

// 删除
localStorage.removeItem('token');

// 清空（请谨慎！）
localStorage.clear();

2. 存储对象／数组#

Local Storage 只能保存字符串。要存储对象或数组，需要先用 JSON.stringify 序列化，取出时再用 JSON.parse 反序列化：

const user = { id: 42, name: 'Alice' };
localStorage.setItem('user', JSON.stringify(user));

const saved = localStorage.getItem('user');
if (saved) {
  const parsedUser = JSON.parse(saved);
  console.log(parsedUser.id, parsedUser.name);
}

3. 应用场景#

用户偏好 比如主题色、布局模式、语言设置等。
表单状态保存 在多步骤表单中暂存已输入内容，防止刷新丢失。
简单缓存 小型数据（如城市列表、标签列表）可缓存在本地，减少网络请求。
离线功能 结合 Service Worker，可以在离线时从 localStorage 读取重要数据。

4. 注意事项#

容量限制：大多数浏览器限制在 5–10 MB 左右，不适合大文件／大数据。
安全性：存储在本地，易被用户或脚本查看／篡改，切勿存储敏感信息（如密码、完整的认证 token）。
同步接口：Local Storage 的 API 是同步的，如果在主线程做大量读取／写入会造成卡顿，谨慎使用。
同源策略：只有协议、域名、端口都相同的页面之间才共享同一个 localStorage 区域。
事件监听：在同一域的不同窗口／标签页中，可以监听 storage 事件，保持状态同步。

window.addEventListener('storage', function (e) {
  console.log('数据更改：', e.key, e.oldValue, '→', e.newValue);
});

5. 小结#

通过 localStorage.setItem/getItem 等方法完成读写。
对象/数组需要 JSON.stringify + JSON.parse。
容量有限且为同步接口，不适合存储大量或敏感数据。
可结合 storage 事件实现多窗口同步。掌握了这些，你就可以在前端项目中灵活地利用 Local Storage 来提升用户体验啦！如果有具体的使用场景或遇到的问题，欢迎随时交流。

1. 基本 API#

2. 存储对象／数组#

3. 应用场景#

4. 注意事项#

5. 小结#

📎 参考文章#