JavaScript中如何存储数据_localStorage限制-js教程-PHP中文网

JavaScript中如何存储数据_localStorage限制

幻影之瞳

发布： 2025-12-05 20:31:15

原创

210人浏览过

localStorage单域名容量约5MB（Safari无痕模式或更低），按源隔离，超限抛QuotaExceededError；仅支持字符串，存对象需JSON序列化；应try/catch写入并降级处理；大数据量推荐IndexedDB。

javascript中如何存储数据_localstorage限制

localStorage 在 JavaScript 中用于在浏览器中持久化存储字符串数据，但有明确的容量限制和使用边界。

localStorage 的典型容量限制

大多数现代浏览器将 localStorage 的单域名存储上限设为 5MB 左右（例如 Chrome、Firefox、Edge），部分浏览器（如 Safari 在无痕模式下）可能低至 2.5MB 或直接禁用。这个限制是**按源（origin）计算**的，即协议 + 域名 + 端口相同才共享同一份 localStorage。

超出限制时，调用 setItem() 会抛出 QuotaExceededError 异常
不是所有浏览器都严格按字节计数——有些按字符数或内部编码长度估算，实际可用空间可能略低于标称值
localStorage 只支持字符串，存对象需先 JSON.stringify()，读取时再 JSON.parse()

如何安全地写入并应对容量不足

不能假设 setItem 一定成功，尤其在长期运行或高频写入的场景中，应主动捕获错误并降级处理：

用 try/catch 包裹 localStorage.setItem(key, value)
捕获到 QuotaExceededError 后，可清空过期项、压缩数据（如移除冗余字段）、或提示用户清理缓存
简单检测剩余空间的方法：尝试存一个较大测试字符串，根据是否报错粗略判断是否临近满载（不精确但实用）

替代方案与适用建议

当数据量大、结构复杂或需要二进制支持时，localStorage 不是最佳选择：

极品模板微商城订单系统

微商城订单管理系统是一款基于php+mysql开发的php订单管理系统，她的特点如下：产品特色：支持商品规格、订单短信提醒，订单提交限制，站外调用，批量发货/导出，数据报表，物流轨迹、免签支付等。 1、高度开源：除核心授权文件外全部开源，二开方便。 2、分布式部署：支持分布式部署、支持数据库读写分离。 3、第三方存储：支持附件腾讯云、阿里云、七牛云存储