Cookie 4KB、LocalStorage 5MB 详细解释

注意：4KB 是整个域名下所有 Cookie 的总上限，不是单个 Cookie；LocalStorage 是每个域名约 5MB，这是浏览器标准限制。

一、Cookie 的 4KB 限制细节

1. 上限规则 同一个网站（域名）下，所有 Cookie 加在一起，原始字符串总大小不能超过 4096 字节（≈4KB）。 不是一个 Cookie 4KB，是全部 Cookie 的总和。

   包含：Cookie 的 key=value、分号、空格、expires、path 这些元信息全部算进字节数。

举个例子，文件夹开合状态，如果放到 Cookie，存储格式一般是把对象 JSON 序列化：

{"工作":true,"生活":false,"项目A":true,"项目B":false,"归档2024":false,"归档2025":true}

把这一整串作为 Cookie 的 value。

假设你有 150 个文件夹： 序列化后的 JSON 字符串很容易就达到 2‑3KB。 而你的网站本身还有登录 Cookie、其他业务 Cookie，加起来很快就冲破 4KB。

👉 一旦超过 4KB，浏览器行为：直接丢弃部分/全部 Cookie，不会报错。 你代码读取的时候，会发现一部分文件夹记忆消失，一部分随机丢失，没有任何控制台报错，属于隐性 Bug，极难排查。

另外 Cookie 传输特点：

浏览器每一次向服务器发 HTTP 请求（打开页面、AJAX、上传文件、保存资料），会把该域名下全部 Cookie，自动塞进 HTTP 请求头发送给后端 PHP。

哪怕服务器完全不需要这个文件夹展开状态，每一次网络请求都要带上这一大串文本：

• 增加请求头体积，浪费带宽；
• PHP 后端每次都要接收、解析这串完全没用的数据；
• 文件夹数量越多，每个请求的头部就越臃肿。

还有数量限制：浏览器还限制一个域名最多 50 个 Cookie，如果你每个文件夹单独建一个 Cookie，几十个文件夹就直接达到数量上限。

两种存法都有坑： 1）全部文件夹状态塞单个 Cookie：容易触发 4KB 大小上限； 2）每个文件夹新建独立 Cookie：容易触发 Cookie 个数上限。

二、LocalStorage 的 5MB 限制细节

localStorage 同样是按域名隔离，每个域名分配约 5 242 880 字节（5MB）存储空间。

和 Cookie 的关键区别：

1. 不会自动发给服务器。数据永久保存在浏览器本地磁盘；只有 JS 代码主动读取，HTTP 请求完全不会带上它。AJAX、页面刷新都不会把这堆文件夹状态上传给 PHP。服务器根本感知不到这份数据存在。

计算一下能存多少文件夹开合记录： 一条记录大概是 "文件夹名":true/false。平均一条 20 字节。 5MB ≈ 5,242,880 字节。 理论可以存十几万条文件夹状态记录。对于你的资料管理系统，文件夹数量根本不可能触达上限。

存储示例（实际存入 localStorage 的字符串）

key：material_folder_expand_state value：

{"工作":true,"生活":false,"项目A":true,"项目B":false,"归档2024":false,"归档2025":true}

哪怕几百个文件夹，JSON 字符串也就几千字节，离 5MB 上限非常遥远。

注意：LocalStorage 存的全部是字符串，对象必须 JSON.stringify 序列化后写入，读取 JSON.parse 还原。

三、对比实例（模拟大量文件夹场景）

假设：200个自定义文件夹，需要记住每个展开/折叠状态。

四、那什么场景才适合用 Cookie？

Cookie 的核心定位：给服务器读的会话/身份数据。 比如你的程序登录功能：

• 登录token，PHP后端需要拿到这个值判断你有没有登录；
• 这种就适合放在Cookie（HttpOnly，JS不能读取，更安全）。

✅ 准则：

1. 服务器业务逻辑必须要用到的数据 → Cookie
2. 纯前端界面偏好：展开折叠、侧边栏宽度、主题色、布局大小 → localStorage

文件夹展开折叠，PHP后端完全不需要知道哪几个文件夹是展开的，只是前端UI表现。把它放到Cookie属于误用，文件夹一多就会出现神秘的记忆丢失问题。

补充一个现实坑

很多开发者踩过 Cookie 4KB 的坑： 开发环境文件夹少，一切正常；用户真实使用，建上百个文件夹后，Cookie 溢出，展开记忆随机消失。而且浏览器不会报任何错误，调试非常折磨。 换成 localStorage，就直接避开这个问题。