localStorage是浏览器持久化本地存储API，数据跨会话、跨标签页共享且不随浏览器关闭丢失；sessionStorage仅限当前标签页会话，关闭即清空；二者均只支持字符串存储，存对象需JSON.stringify/parse，且受同源限制、容量限制（5–10MB）及XSS安全风险约束。
localStorage 是什么，和 sessionStorage 有什么区别
localStorage 是浏览器提供的本地存储 API，用于在用户设备上持久保存键值对数据。只要不手动清除或用户主动删除站点数据，localStorage 中的数据就一直存在，即使关闭标签页、重启浏览器甚至重启电脑也不会丢失。
它和 sessionStorage 最关键的区别在于生命周期：sessionStorage 只在当前会话（即单个标签页）有效，页面关闭后自动清空；而 localStorage 是跨会话、跨标签页共享的——同一源（协议 + 域名 + 端口）下所有标签页都能读写同一份数据。
注意：两者都只能存字符串，任何非字符串值（如对象、数组、布尔值）都会被自动调用 toString() 转换，导致数据失真，比如 localStorage.setItem('count', 42) 实际存的是字符串 "42"，不是数字。
怎么安全地存取对象和复杂数据
直接用 localStorage.setItem() 存对象会变成 [object Object]，必须手动序列化和反序列化：
立即学习“Java免费学习笔记（深入）”；
- 存数据前用
JSON.stringify()转成字符串 - 取数据后用
JSON.parse()还原，但要加try...catch防止解析失败（比如用户手动改了 localStorage 内容） - 避免直接操作
localStorage原始接口，封装一层更可靠
function setItem(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
console.warn(`localStorage set failed for ${key}:`, e);
}
}
function getItem(key) {
const raw = localStorage.getItem(key);
if (!raw) return null;
try {
return JSON.parse(raw);
} catch (e) {
console.warn(`localStorage parse failed for ${key}:`, e);
return null;
}
}
// 使用示例
setItem('user', { name: 'Alice', age: 30 });
const user = getItem('user'); // { name: 'Alice', age: 30 }
localStorage 有哪些常见报错和限制
最常遇到的是 QuotaExceededError，说明存储超限（通常 5–10MB，取决于浏览器），尤其在存大量日志或未压缩的 JSON 时容易触发。
其他典型问题包括：
-
SecurityError：在无源环境（如直接双击打开file://HTML 文件）或禁用第三方 Cookie 的隐私模式下，localStorage可能被完全禁用 - 同源限制严格：不同子域名（
app.example.comvsapi.example.com）互不可见，哪怕只差一个子域 - 没有过期机制：不能设 TTL，需要自己在数据里加时间戳并手动清理
- 同步阻塞：所有操作都是同步的，大数据量读写可能卡住主线程（虽不常见，但在低配设备或频繁调用时要注意）
什么时候不该用 localStorage
它不是万能缓存，也不该当数据库用。以下场景建议绕开：
- 存敏感信息（如 token、密码、身份证号）——
localStorage可被同源任意 JS 脚本读取，XSS 攻击下极易泄露 - 需要服务端同步的状态（如购物车）——客户端存了，服务端不知道，状态容易不一致
- 高频更新的小字段（如计数器）——每次都要
JSON.parse → 修改 → JSON.stringify，开销比必要大 - 需要监听变化的场景——
localStorage本身不触发事件，得靠storage事件监听，且只在**其他同源窗口**修改时才触发，当前窗口改完不会通知自己
真正需要持久化又带权限控制的数据，优先走后端接口；临时 UI 状态（如折叠菜单、暗色模式开关）才是 localStorage 的舒适区。
