localStorage 与 sessionStorage

网页存储接口提供两个客户端键值存储：localStorage（跨会话持久保存）和 sessionStorage（标签页关闭时清除）。两者都存储字符串值，并且可在同一源上通过 JavaScript 同步访问。

localStorage 中的数据会一直保留，直到被代码、用户或浏览器数据删除操作明确清除。数据可以跨越浏览器重启、页面刷新和标签页关闭而保留。容量通常为每个源 5-10MB，具体取决于浏览器。

sessionStorage 的作用域是当前浏览器标签页和会话。在同一标签页中，数据会在页面刷新后保留，但标签页关闭时会被清除。同一网站的两个标签页拥有彼此独立、隔离的 sessionStorage，不会共享数据。

两种存储使用相同的接口：setItem(key, value)、getItem(key)、removeItem(key)、clear() 和 length 属性。同一段代码可以用于两者，只需将 localStorage 替换为 sessionStorage，反之亦然。

以下情况使用 localStorage：用户偏好（主题、语言）、缓存的应用程序接口响应、记住我功能。以下情况使用 sessionStorage：向导或表单的步骤状态、结账前的临时购物车、出于隐私原因不应跨访问保留的数据。

两种存储都严格限定在源内（协议 + 主机 + 端口）。https://example.com 无法读取由 http://example.com 设置的 localStorage。这是一道安全边界——除非操纵 document.domain（已弃用），否则子域名也属于不同的源。

在大多数浏览器中，两者的限制都是每个源约 5MB。超过限制会抛出 QuotaExceededError。大型数据存储需求应使用 IndexedDB，后者支持存储数 GB 的结构化数据。网页存储适合保存小型键值对，不适合保存二进制块或大型数据集。

网页存储的读取和写入都是同步的，会阻塞主线程。对于大型读取或写入，这可能导致页面卡顿。频繁进行大型数据操作时，应优先使用 IndexedDB。请让网页存储中的值保持较小，并降低操作频率，以避免性能问题。

网页存储只存储字符串。使用 JSON.stringify() 序列化对象，使用 JSON.parse() 反序列化。请处理解析失败：try { return JSON.parse(stored) } catch { return defaultValue }。存储中的损坏值或非 JSON 值会导致解析错误。

隐私或无痕模式下的 localStorage 会在所有隐私窗口关闭时被清除，其行为类似于 sessionStorage。依赖 localStorage 保存身份验证状态的代码应处理 localStorage 被意外清除的情况。

浏览器正日益限制第三方存储访问。嵌入 first-party.com 的来自 third-party.com 的内嵌框架无法访问 third-party.com 的 localStorage。Safari 的 ITP 和 Firefox 的增强型跟踪保护会对存储进行分区；第一方使用不受影响。

sessionStorage 何时会被清除？

localStorage 会一直持久保存，直到通过程序或由用户清除；sessionStorage 会在标签页关闭时清除。两者都是限定在源内的、同步的字符串键值存储，容量约为 5MB。请将 localStorage 用于偏好设置和持久状态，将 sessionStorage 用于不应在标签页关闭后保留的临时会话状态。