Web Storage 存储容量的检测与超额处理方法

雨敏酱_1665

雨敏酱_1665

2026-07-17

750人浏览

原创

localstorage无统一容量上限,实际空间取决于浏览器、平台与系统状态;超限时setitem()抛出quotaexceedederror;需用textencoder计算utf-8字节长度并预留余量;应试探+异常捕获双保险;清理须按前缀、过期、损坏精准剔除;大数据应降级至indexeddb或分片存储。

web storage 存储容量的检测与超额处理方法

Web Storage(主要是 localStorage)没有统一容量上限,实际可用空间因浏览器、平台和系统状态而异,检测与超额处理必须结合试探写入、异常捕获和分级降级,不能依赖固定数值或静态估算。

真实容量取决于运行时环境

所谓“5MB”只是历史建议值,早已失效。Chrome 和 Edge 桌面版通常提供约 10 MB,Firefox 约 5–10 MB,iOS Safari 在内存紧张时可能骤降至 0,微信 X5 内核实测甚至不足 1 MB。这些数值不是配置项,而是浏览器根据设备空闲空间、隐私模式、同源策略动态分配的结果。

关键点:

  • localStorage 按 UTF-8 字节计费,不是 JavaScript 字符长度 —— 一个中文字符占 2 字节,一个 emoji 占 4 字节;
  • key 名、JSON 引号、空格都计入字节,预估时应预留至少 10% 余量;
  • 不能用 JSON.stringify(obj).length 判断容量,需用 new TextEncoder().encode(str).length 获取真实字节数。

运行时检测靠试探+异常,而非查询 API

浏览器不提供 remainingSpace 这类接口,navigator.storage.estimate() 虽可返回 usage 和 quota,但它是 origin 级别的粗略估算(含 IndexedDB、Cache 等所有存储),且仅在 HTTPS 或 localhost 下可用,隐身模式下常返回极小值(如 128 MB),无法精准反映 localStorage 当前可用空间。

造次
造次

一款AI视频创作工具,主要用于Liblib打造的AI原创IP视频创作社区,适合需要提升相关任务效率的用户。

下载

更可靠的做法是轻量试探:

  • 写入一个短字符串(如 localStorage.setItem('probe', 'x')),成功后立即 removeItem('probe');
  • 所有 setItem() 必须包裹 try-catch,专门检查 err.name === 'QuotaExceededError' 或 err.code === 22;
  • 捕获后不应直接清空全部数据,而应触发定向清理(如删除 cache_ 前缀项、过期项或解析失败的损坏项)。

超额时优先降级,而非硬扛

localStorage 是同步、字符串-only、容量封顶的简易方案,不适合承载大数据。当单条数据超 100 KB 或总量逼近 5 MB 时,应主动切换技术栈:

  • 降级到 IndexedDB:支持更大配额(Chrome 可达空闲磁盘的 60%,初始约 50–250 MB),并可通过 navigator.storage.estimate() 获取更稳定估算;
  • 临时存入内存 Map:适用于页面生命周期内有效的小状态(如表单草稿),避免数据丢失;
  • 拆分存储:对大对象做分片(如每片 ≤ 100 KB),配合 key 命名规则(data_123_part0);
  • 启用持久化权限:navigator.storage.persist() 可提升部分浏览器的配额稳定性,但需用户授权。

安全清理要精准,避免误删核心数据

调用 clear() 会一并清除登录态、token、主题偏好等关键字段,风险极高。应按策略逐项清理:

  • 只操作明确标记的非核心 key,如 cache_、draft_、search_;
  • 读取 value 后尝试 JSON.parse(),检查是否存在 expiresAt 或 createdAt 字段,优先剔除过期项;
  • 对解析失败的 value 视为损坏数据,可安全移除;
  • 清理后建议校验关键字段(如 auth_token)是否仍存在,防止影响核心功能。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

存储容量

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2243

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4803

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5930

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5398

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

763

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

1995

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2842

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

976

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3219

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.4万人学习