LocalStorage是HTML5规范中提供的浏览器本地存储API，属于Web Storage的一部分，允许开发者在用户的浏览器中保存键值对形式的数据，且保存的数据没有过期时间，除非主动删除，否则会一直保留在浏览器中。
LocalStorage的基本特性
LocalStorage和另一个浏览器存储方案SessionStorage有很多相似之处，但也有明显的区别，主要特性如下：
- 存储容量较大，一般浏览器支持5MB左右的存储空间，远大于Cookie的4KB限制
- 存储的数据仅在客户端保存，不会随HTTP请求发送到服务器，减少网络传输开销
- 数据持久化，除非手动清除，否则关闭浏览器、重启电脑后数据依然存在
- 仅支持存储字符串类型的数据，如果需要存储对象、数组等复杂类型，需要先做序列化处理
- 受同源策略限制，不同域名、不同协议、不同端口下的页面无法互相访问对方的LocalStorage数据
LocalStorage的常用操作方法
LocalStorage的操作非常简单，所有方法都挂载在window.localStorage对象上，常用的有以下几类：
1. 存储数据
使用setItem方法可以向LocalStorage中存入数据，接收两个参数，第一个是键名，第二个是键值，键值会被自动转换为字符串：
// 存储简单字符串
localStorage.setItem('username', '张三');
// 存储对象需要先序列化
const userObj = { id: 1, name: '李四', age: 20 };
localStorage.setItem('userInfo', JSON.stringify(userObj));
2. 读取数据
使用getItem方法可以读取LocalStorage中指定键名的数据，如果键名不存在则返回null：
// 读取字符串数据
const username = localStorage.getItem('username');
console.log(username); // 输出：张三
// 读取对象数据需要反序列化
const userInfoStr = localStorage.getItem('userInfo');
if (userInfoStr) {
const userInfo = JSON.parse(userInfoStr);
console.log(userInfo.name); // 输出：李四
}
3. 删除数据
删除LocalStorage中的数据有两种方式，一种是删除单个键值对，一种是清空所有数据：
// 删除单个键名为username的数据
localStorage.removeItem('username');
// 清空当前域名下所有的LocalStorage数据
localStorage.clear();
4. 修改数据
LocalStorage没有专门的修改方法，重新调用setItem方法设置同一个键名的数据，就会覆盖原有的值，实现修改效果：
// 先存储username为张三
localStorage.setItem('username', '张三');
// 重新设置username为王五，覆盖原有值
localStorage.setItem('username', '王五');
console.log(localStorage.getItem('username')); // 输出：王五
LocalStorage的使用场景
LocalStorage适合存储不需要频繁更新、不需要发送到服务端的本地数据，常见场景包括：
- 保存用户的个性化设置，比如主题模式、字体大小、语言偏好等
- 缓存不经常变动的静态数据，比如城市列表、商品分类等，减少接口请求次数
- 保存用户的登录状态令牌，避免用户每次刷新页面都需要重新登录
- 存储表单的草稿数据，用户填写一半关闭页面后，下次打开可以继续填写
使用LocalStorage的注意事项
虽然LocalStorage使用起来很方便，但在实际开发中需要注意以下问题：
- 不要存储敏感数据，比如用户密码、银行卡号等，因为LocalStorage的数据可以被同源页面的JavaScript任意访问，存在安全风险
- 存储复杂类型数据时一定要做好序列化和反序列化处理，避免存储失败或者读取到错误的数据
- 注意存储容量限制，不要存储过大的数据，避免超出浏览器的存储上限导致报错
- 在浏览器无痕模式下，部分浏览器可能会限制LocalStorage的使用，或者关闭页面后自动清除数据，需要做兼容处理
- 如果需要监听LocalStorage的变化，可以使用
storage事件，当其他同源页面修改LocalStorage时，当前页面会触发该事件：
// 监听LocalStorage变化
window.addEventListener('storage', function(event) {
console.log('变化的键名：', event.key);
console.log('变化前的值：', event.oldValue);
console.log('变化后的值：', event.newValue);
});
LocalStorage和SessionStorage的区别
很多开发者会混淆LocalStorage和SessionStorage，两者的对比如下：
| 对比项 | LocalStorage | SessionStorage |
|---|---|---|
| 数据有效期 | 永久保存，除非手动删除 | 仅在当前会话有效，关闭浏览器标签页或窗口后数据清除 |
| 作用范围 | 同源的所有窗口、标签页共享数据 | 仅在当前浏览器标签页内有效，不同标签页即使同源也无法共享 |
| 存储容量 | 一般5MB左右 | 一般5MB左右 |
| API操作 | setItem、getItem、removeItem、clear | setItem、getItem、removeItem、clear |
在实际开发中，可以根据数据的有效期需求选择合适的存储方案，如果需要数据长期保存就选LocalStorage，如果仅需要在单次会话中临时保存数据就选SessionStorage。
JavaScriptLocalStorage浏览器存储local_storage修改时间：2026-07-05 22:03:24