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 或解析异常。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
超出容量或特殊字符导致写入失败
大多数浏览器限制 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，而是想清楚数据要不要跨会话保留、有没有被脚本恶意读取的风险、以及用户换了设备或清了缓存之后，你的“本地”到底还剩多少。
