背景
前几天，有个小伙伴在群里发问 "localStorage对于单个key存的值大小有限制吗?" 。
我看过的大多数关于 localStorage 的文章和八股文，基本上都是说总的限制是 5MB+，至于是所有 key 对应的 value 总大小还是单个 key 的 value 大小并没有说明。
实践
新建一个react项目，写了👇🏻这段代码，来测下 localStorage 单个 key 在 Chrome 上对应的最大值：
import React, { useRef } from "react";
const key = '1';
const a = 'a'.repeat(10000);
const storage = window.localStorage;
const TestStorage = () => {
const str = useRef(a);
const lastCount = useRef(10000);
const handleStart = () => {
str.current = str.current + a;
storage.setItem(key, str.current);
let curCount = storage.getItem(key).length;
if (curCount <= lastCount) {
return;
}
lastCount.current = curCount;
window.requestAnimationFrame(handleStart)
}
return (
<div>
<button onClick={handleStart}>开始</button>
</div>
)
}
export default TestStorage;
代码很简单，一直往 localStorage 中设置 key 为 1 的值，每次设置都在之前的基础上在加上1w 个 a ，当setItem之后如果 storage.getItem(key).length 小于或等于上次的长度，说明已经无法设置了，则结束。
点击开始按钮，执行测试。在最后一次设置时，浏览器会抛出错误：
image.png
浏览器表示已经超出限制，无法继续执行
storage.setItem('1', str.current) 。
接着在控制台执行 localStorage.getItem('1')，可以看到设置的 a...... 的大小：
image.png
说明单个 key 的限制是 5.2MB，那现在还能在设置其他的 key 吗？
在控制台继续执行 localStorage.setItem('2', '....')，发现最多还能在设置 2800 ~ 2900 个 a 字符，超出这个长度浏览器就会报超出限制的错误：
image.png
说明，localStorage 5MB+ 限制是指所有 value 的总大小限制。
结论
-
localStorage5MB+ 限制是指所有 value 的总大小限制。 - 单个 key 达到上限，无法继续设置其他 key。
- 超出上限会抛出
DOMException错误，而不是替换。
