localStorage是浏览器提供的同源、持久化字符串存储机制,容量5–10MB,需手动JSON序列化对象,支持setItem/getItem/removeItem/clear,可通过storage事件监听跨标签页变更,但不防XSS且无过期机制。

localStorage 是浏览器提供的一种简单持久化存储方式,数据保存在用户本地,关闭页面甚至重启浏览器也不会丢失,适合存少量字符串数据(比如用户偏好、登录状态标记等)。
基本用法:setItem 和 getItem
存数据用 localStorage.setItem(key, value),取数据用 localStorage.getItem(key)。注意:value 必须是字符串,如果要存对象,得先用 JSON.stringify() 转成字符串;读出来时再用 JSON.parse() 还原。
-
存一个主题设置:
localStorage.setItem('theme', 'dark') -
存一个用户信息对象:
localStorage.setItem('user', JSON.stringify({name: '张三', id: 101})) -
读取并解析:
const user = JSON.parse(localStorage.getItem('user'))
删除和清空数据
用 removeItem(key) 删除某一项,用 clear() 清空全部 localStorage(谨慎操作,会影响所有键值)。
-
删掉主题设置:
localStorage.removeItem('theme') -
清空当前域名下所有 localStorage:
localStorage.clear()
注意事项和常见问题
localStorage 是**同源限制**的(协议+域名+端口完全一致才可访问),且容量一般为 5–10MB(因浏览器而异)。它不支持过期时间,也不能跨窗口实时同步变更(需配合 storage 事件监听)。
立即学习“Java免费学习笔记(深入)”;
-
监听其他标签页的 localStorage 变更:在 window 上监听
storage事件,但注意:触发该事件的页面自身不会收到(只通知其他同源窗口) - 不能存函数、undefined、Symbol 等非字符串/非可序列化值
- 敏感信息(如 token)不建议直接存在 localStorage,有 XSS 风险
简易封装一个安全的工具函数
可以自己封装一层,自动处理 JSON 序列化和错误捕获,让使用更稳:
const LS = {
set(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
console.warn('localStorage set failed:', e);
}
},
get(key) {
try {
const str = localStorage.getItem(key);
return str ? JSON.parse(str) : null;
} catch (e) {
console.warn('localStorage get failed:', e);
return null;
}
}
};
用起来就更顺手了:LS.set('cart', [{id:1, qty:2}]); const cart = LS.get('cart');
基本上就这些。localStorage 不复杂但容易忽略细节,用对了能省不少事。











