17370845950

LocalStorage用于长期存储，关闭浏览器仍保留；SessionStorage仅限当前标签页，关闭即清除；二者均遵循同源策略，仅支持字符串，容量约5–10MB。

JavaScript操作浏览器存储，主要靠 LocalStorage 和 SessionStorage 两个 Web Storage API。它们都以键值对（key-value）形式保存字符串数据，用法相似，但生命周期和作用域不同——选哪个，关键看你要存的数据“活多久”“在哪儿用”。

LocalStorage：关掉浏览器也不丢，适合长期缓存

LocalStorage 的数据会一直保留在用户设备上，除非手动清除（比如调用 localStorage.clear() 或用户在浏览器设置里删除），即使关闭标签页、重启浏览器甚至电脑，数据依然存在。

• 适用场景：用户偏好设置（如主题色、语言）、登录态标识（配合后端 token 验证）、离线内容缓存（如文章草稿、商品列表）
• 注意：不能存敏感信息（如密码、完整 token），因为它是纯前端可读的，且无自动过期机制
• 基本操作示例：
  localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');

SessionStorage：只活在当前标签页，关了就清空

SessionStorage 的数据仅在当前浏览器标签页（或窗口）中有效，页面刷新不丢失，但一旦关闭该标签页，所有数据自动销毁。同一域名下的不同标签页之间互不共享。

• 适用场景：表单临时数据（如多步填写未提交的订单信息）、一次性验证码、页面内状态快照（如筛选条件暂存）
• 优势：天然隔离，避免跨标签页干扰；安全性略高于 LocalStorage（生命周期短，攻击窗口小）
• 基本操作与 LocalStorage 完全一致，只是把 localStorage 换成 sessionStorage

别只看“存多久”，还要看“谁能看到”

两者都遵循同源策略（same-origin policy），即只有相同协议、域名、端口的脚本才能访问对应存储。但要注意：

• HTTP 和 HTTPS 视为不同源，数据不互通
• 子域名间默认不共享（shop.example.com 和 blog.example.com 无法互相读取）
• 如果需要跨子域名共享，需配合 document.domain（已逐步被弃用）或后端接口中转

容量和兼容性：够用，但别当数据库用

大多数浏览器给每个源分配约 5–10MB 存储空间（远大于 Cookie 的 4KB），支持 IE8+、所有现代浏览器。不过它只支持字符串值：

• 存对象？先 JSON.stringify()；取出来再 JSON.parse()
• 频繁读写大量数据会影响性能，不适合替代 IndexedDB 做复杂结构化存储
• 没有监听变更的原生事件（可用 storage 事件监听同源其他标签页的修改，但当前页修改不会触发自身）

不复杂但容易忽略：选 LocalStorage 还是 SessionStorage，本质是在问——这个数据，用户下次打开网页时还需要吗？需要，就 Local；只服务于这一次交互，就 Session。