怎么使用JavaScript操作浏览器存储限制？

使用JavaScript操作浏览器存储限制需明确各类存储的容量边界、查看使用情况的方法，并采取优化数据、合理规划生命周期、实时监控、错误捕获等策略，同时根据场景选择合适的存储方案。

• 浏览器存储容量限制

  LocalStorage和SessionStorage：通常每个源（协议+域名+端口）限制在5MB到10MB之间，不同浏览器厂商有细微差别。它们是同步存储，只能存储字符串，不适合大量数据存储，否则可能阻塞主线程。

  IndexedDB和Cache API：容量大得多，通常可达数百MB到数GB，共享一个存储池，大小与用户设备可用磁盘空间有关，可能被限制为总磁盘空间的50%左右。浏览器会设定“软限制”和“硬限制”，达到“软限制”可能提示用户，达到“硬限制”存储操作会失败。它们是异步存储，支持存储结构化数据和二进制数据。

  Cookies：每个Cookie约4KB，每个域名下Cookie总数限制大约在20 - 50个。主要用于会话管理和少量用户偏好设置，不适合通用存储，因为容量小且每次请求都会携带，增加网络开销，安全性相对较低。

• 查看当前存储使用情况

  使用navigator.storage.estimate() API：这是最准确的方式。它是一个异步方法，返回一个Promise，解析后得到包含usage（已用字节数）和quota（总配额字节数）的对象。示例代码如下：

• 通过浏览器开发者工具查看：在Chrome或Firefox中，通常在“Application”或“存储”标签页下可以查看LocalStorage、SessionStorage和Cookies的具体内容和大小。

• 应对浏览器存储达到上限的策略

  预防阶段

  数据精简化和压缩：存储前对数据进行精简，只存必要字段，去除冗余。对于字符串数据，可使用LZ - string等库进行压缩。例如，缓存大量JSON数据时，压缩可使存储效率提升3 - 5倍。

  合理选择存储方式：小数据用LocalStorage，大数据用IndexedDB，网络响应走Cache API，避免把所有数据都放在一种存储中。

  设置数据生命周期：给数据打上时间戳，定期清理过期数据。可以在Service Worker环境中设置后台定时任务，或在应用启动时检查并清理。

  感知阶段

  实时监控：在应用关键操作（如写入大量数据前）调用navigator.storage.estimate()，判断当前存储使用率，接近上限时提前给用户提示。

  错误捕获：任何存储操作都应包裹在try...catch块中，特别是localStorage.setItem()或IndexedDB的事务操作。捕获到QuotaExceededError时，可优雅地通知用户，示例代码如下：

• 补救阶段

  用户引导：告知用户可手动清理浏览器缓存，或在设置中允许网站使用更多存储空间（针对IndexedDB/Cache API）。

  自动清理策略：对于缓存数据，实现LRU（最近最少使用）或LFU（最不常用）策略，当存储空间不足时，自动删除最旧或最不常用的数据。在IndexedDB中可根据数据的访问时间或使用频率进行索引和查询后删除。

  数据降级/云端存储：本地存储失败时，考虑将数据降级处理，如只存储核心功能所需数据，或将部分数据上传到云端，让用户下次访问时从服务器获取。

• 根据场景选择浏览器存储方案

  LocalStorage / SessionStorage

  优点：API简单，直接键值对操作，学习成本低。LocalStorage数据持久化（除非用户手动清理），SessionStorage数据随会话结束而清除。

  缺点：容量小，只能存储字符串，同步操作可能阻塞UI。

  适用场景：用户偏好设置（如主题模式、语言选择、字号大小等）；简单的用户会话信息（如临时购物车ID用SessionStorage，用户登录后的token用LocalStorage）；少量静态缓存（如更新不频繁的下拉菜单选项列表）。

  IndexedDB

  优点：容量大，支持存储结构化数据和二进制数据，异步操作不阻塞UI，支持事务，可创建索引进行高效查询。

  缺点：API相对复杂，学习曲线较陡峭。

  适用场景：离线应用数据（PWA的核心，存储大量离线内容）；复杂的数据缓存（如博客应用的全部文章内容、电商应用的商品列表和详情）；用户生成内容（用户上传到服务器前临时保存草稿或编辑中的内容）；大型数据分析（在客户端进行大量数据处理和存储）。

  Cache API (结合Service Worker)

  优点：专为缓存网络请求设计，与Service Worker结合能实现强大离线能力和高性能，容量大。

  缺点：必须配合Service Worker使用，主要用于缓存网络响应，不适合直接存储任意数据。

  适用场景：PWA的静态资源缓存（确保应用核心UI和逻辑离线时能加载）；API响应缓存（缓存后端API返回数据，提高重复请求速度，减少服务器压力）；离线优先策略（先从缓存读取，再尝试网络请求，提升用户体验）。

  Cookies

  优点：自动随HTTP请求发送到服务器，服务器端可直接读取和设置。

  缺点：容量小，每次请求都携带增加网络开销，安全性相对较低。

  适用场景：会话管理（存储会话ID）；用户追踪（记录用户少量行为信息）；非常小的用户偏好（如“记住我”复选框状态）。

总结：大部分情况下会组合使用这些存储方案，如用LocalStorage存用户主题设置，用IndexedDB存离线业务数据，用Cache API缓存应用资源和API响应。关键在于理解它们的特性和限制，根据应用需求做出合适选择。