localStorage用于跨会话持久存储，同源共享；sessionStorage仅限当前标签页，关闭即销毁；二者均需手动序列化对象，超容或禁用时会抛异常，且storage事件不触发于当前页修改。
本地存储不是“存完就完事”，关键在什么时候用 localStorage、什么时候该换 sessionStorage，以及为什么某些数据存不进去还不出错。
localStorage 和 sessionStorage 的核心区别在哪
两者 API 完全一致，但生命周期和作用域不同：
-
localStorage：数据永不过期，关闭标签页、重启浏览器都还在，同源（协议+域名+端口）下所有页面共享 -
sessionStorage：仅当前标签页有效，关掉标签页即清空，即使同域名的其他标签页也读不到 - 二者都只能存字符串，存对象必须先
JSON.stringify()，取出来要JSON.parse() - 都不受 HTTP 缓存或 Cookie 设置影响，也不发请求，纯前端行为
存对象时忘记序列化会静默失败
调用 localStorage.setItem('user', {name: 'Alice'}) 看似没报错，但实际存入的是 "[object Object]"——因为 setItem 会自动调用 .toString()。取出来再 JSON.parse() 就直接报错。
正确写法必须显式处理：
立即学习“Java免费学习笔记（深入）”；
const user = { name: 'Alice', age: 28 };
localStorage.setItem('user', JSON.stringify(user));
const saved = localStorage.getItem('user');
const parsed = saved ? JSON.parse(saved) : null;
建议封装一层安全读写函数，避免每次手动判断 null 或解析异常。
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。 本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。
超出容量或特殊字符导致写入失败
大多数浏览器限制 localStorage 总容量在 5–10 MB 左右，但它是按 origin 计算的，不是单个 key。一旦超限，setItem 会抛出 QuotaExceededError 异常，而不是返回 false。
- 中文、emoji、控制字符本身不导致失败，但经过
JSON.stringify()后可能增大体积 - 某些浏览器（如 Safari 无痕模式）会直接禁用
localStorage，调用即抛错，需 try/catch - 敏感数据（如 token）别直接存——它不加密、不防 XSS，JS 可任意读取
稳妥做法是加兜底逻辑：
function safeSet(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.warn('localStorage quota exceeded');
} else if (e.name === 'SecurityError') {
console.warn('localStorage is disabled or blocked');
}
}
}
监听 storage 变化只在其他标签页生效
storage 事件只在**同一 origin 下的其他窗口/标签页**触发，当前页面修改后不会收到自己的事件。这是常被误解的一点。
- 适合做多标签页状态同步（比如用户登出后通知其他页刷新）
- 监听写法：
window.addEventListener('storage', e => {...}) -
e.key是被改的键名，e.newValue和e.oldValue是字符串值（注意：删除时newValue为null） - 无法得知是谁触发的变更，也无法阻止变更
如果需要当前页响应自身修改，得自己发自定义事件或用状态管理工具同步。
真正麻烦的不是怎么写那几行 setItem，而是想清楚数据要不要跨会话保留、有没有被脚本恶意读取的风险、以及用户换了设备或清了缓存之后，你的“本地”到底还剩多少。
