JavaScript如何利用本地存储？

JavaScript通过localStorage和sessionStorage实现本地存储：前者长期保存、跨会话有效，后者仅限当前标签页生命周期；均以字符串键值对存储，需JSON序列化对象，注意容量限制与安全风险。

JavaScript 利用本地存储主要通过 localStorage 和 sessionStorage 两个 Web API，它们都以键值对（字符串）形式在浏览器中持久或临时保存数据，无需后端参与，适合缓存用户偏好、表单草稿、登录状态标识等场景。

localStorage：长期保存，跨会话有效

数据保存后即使关闭浏览器、重启电脑也不会丢失，除非手动清除或代码删除。适用于记住主题模式、语言选择、最近搜索记录等。

• 写入数据：localStorage.setItem('theme', 'dark')
• 读取数据：const theme = localStorage.getItem('theme')（返回字符串，注意类型转换）
• 删除单个：localStorage.removeItem('theme')
• 清空全部：localStorage.clear()
• 注意：只能存字符串；如需存对象，先用 JSON.stringify()，读取时用 JSON.parse()

sessionStorage：仅限当前标签页生命周期

数据只在当前浏览器标签页有效，关闭该标签页即自动清除。适合临时状态，比如多步骤表单的中间数据、页面内导航的过渡参数。

• 用法与 localStorage 完全一致，只是把 localStorage 换成 sessionStorage
• 同一域名下不同标签页之间的 sessionStorage 互不共享
• 刷新页面不会丢失数据，但关闭再打开新标签页就没了

使用前检查支持性与容量限制

虽然现代浏览器普遍支持，但某些隐私模式或旧版本可能禁用。同时，存储空间有限（通常 5–10MB），且每个域名独立计算。

• 简单检测：if (typeof localStorage !== 'undefined') { ... }
• 写入时建议加 try-catch，防止超出配额报错：
  try { localStorage.setItem('key', 'value'); } catch (e) { console.warn('本地存储失败:', e); }
• 避免存敏感信息（如密码、token），因为 localStorage 可被同源 JavaScript 任意读取

配合事件监听实现跨标签页通信（进阶）

当一个标签页修改 localStorage 时，其他同源标签页可通过 storage 事件得知变化，适合同步状态。

• 监听示例：
  

  window.addEventListener('storage', (e) => {
    console.log('键', e.key, '从', e.oldValue, '变为', e.newValue);
  });

• 注意：触发事件的标签页自身不会收到该事件，仅其他同源页面响应
• 可用于“多窗口同步登录状态”或“一处修改，处处更新”的轻量场景