localStorage 5M限制 ？？

背景

前几天，有个小伙伴在群里发问 "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 的总大小限制。

结论

• localStorage 5MB+ 限制是指所有 value 的总大小限制。
• 单个 key 达到上限，无法继续设置其他 key。
• 超出上限会抛出 DOMException 错误，而不是替换。