如何利用JavaScript实现本地存储【教程】_技术教程

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() 就直接报错。

正确写法必须显式处理：

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 或解析异常。

超出容量或特殊字符导致写入失败

大多数浏览器限制 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');
    }
  }
}