在 React 中读取和写入 localStorage

localStorage 是浏览器内置的存储空间，包含四个核心方法：setItem(key, value)、getItem(key)、removeItem(key) 和 clear()。数据会在页面重新加载和浏览器重启后继续保留。

它位于 window 对象上，并按来源划分范围，也就是说，每个域名都有自己独立的存储空间。

每次 localStorage 调用都会在主线程上同步运行。读取或写入大量数据可能会阻塞渲染，使用户界面感觉卡顿。

因此，请让存储的值保持较小，并避免在每次按键或滚动事件发生时都进行写入。

localStorage 只能存储字符串。要存储对象或数组，您必须先使用 JSON.stringify(value) 将其序列化，然后再调用 setItem。

如果直接存储非字符串值，它会被强制转换，因此对象会变成无用的字符串 [object Object]。

读取时，您可以调用 JSON.parse(localStorage.getItem(key))，但如果存储的字符串已损坏或由其他来源写入，解析可能会抛出错误。

请将解析操作放在 try/catch 中，并在出错时使用默认值作为后备，以免错误条目导致组件崩溃。

localStorage 并不总是可用：在服务端渲染期间，window 不存在；某些隐私浏览模式则会在写入时抛出错误。请通过功能检测来保护访问操作。

一种安全的测试方法是使用 try/catch 设置并移除一个临时键；如果抛出错误，则返回 false。

大多数浏览器会将每个源的 localStorage 容量限制在约 5MB。写入时超出该限制会抛出 QuotaExceededError。

因此，localStorage 适合存储少量数据，但不适合存储图像、大型数据集或缓存的应用程序接口响应。

适合存储的数据包括少量、非敏感的界面和用户状态：主题偏好、侧边栏折叠状态、上次使用的筛选条件、已关闭的横幅，以及未保存的表单草稿。

这些值应在重新加载后保留，但不需要与服务器往返通信。

请避免存储令牌或密码等机密，因为页面上的任何脚本都能读取 localStorage，使其容易受到 XSS 攻击。也请避免存储大型对象和权威的服务器状态。

敏感的身份验证数据应放在带有 httpOnly 属性的 Cookie 中，规范数据则应放在服务器上。

两者提供相同的应用程序接口，但 sessionStorage 的生命周期与标签页绑定，标签页关闭时会被清除，并且不会在标签页之间共享。localStorage 会永久保留，并在同一源的所有标签页之间共享。

对于短期、标签页专属的数据，请选择 sessionStorage；对于长期偏好，请选择 localStorage。

Cookie 体积小，并会随每个超文本传输协议请求发送，因此适合身份验证，但将其用于一般数据会浪费带宽。IndexedDB 是一种用于大型结构化数据的异步数据库，容量远超 5MB 上限。

服务器读取的身份验证数据请选择 Cookie，少量客户端偏好请选择 localStorage，大型或复杂数据请选择 IndexedDB。

一个最简辅助函数使用 localStorage.setItem(key, JSON.stringify(value)) 写入，并在 JSON.parse(localStorage.getItem(key)) 外围使用受保护的 try/catch 进行读取，失败时返回默认值。

这个小型封装将序列化和错误处理集中在同一个位置。

检验您对 localStorage 数据类型的理解。

您学习了 localStorage 应用程序接口，了解到它是同步的、仅支持字符串且容量约为 5MB，并学会了如何安全解析以及检查其在 SSR 和隐私模式下的可用性。

您还将它与 sessionStorage、Cookie 和 IndexedDB 进行了比较，以便选择合适的存储方案。