以下文章来源于云的程序世界 ，作者云的世界

灵魂五问

  1. localStorage 存储的键值采用什么字符编码 utf-16
  2. 5M 的单位是什么 utf-16编码单元，字符长度；也可以说是10m字节空间
  3. localStorage 键占不占存储空间 占
  4. localStorage的键的数量，对写和读性能的影响 键的数量对读写影响小，值的内容大小对读写影响大
  5. 写个方法统计一个localStorage已使用空间

我们挨个解答，之后给各位面试官又多了一个面试题。
我们常说localStorage存储空间是5M，请问这个5M的单位是什么？

localStorage 存储的键值采用什么字符编码？

打开相对权威的MDN localStorage#description[1]

The keys and the values stored with localStorage are always in the UTF-16 DOMString[2] format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

翻译成中文：

localStorage 存储的键和值始终采用 UTF-16 DOMString 格式，每个字符使用两个字节。与对象一样，整数键将自动转换为字符串。

答案：UTF-16
MDN这里描述的没有问题，也有问题，因为UTF-16，每个字符使用两个字节，是有前提条件的，就是码点小于0xFFFF(65535)， 大于这个码点的是四个字节。
这是全文的关键。

5M 的单位是什么

5M的单位是什么？
选项：

  1. 字符的个数
  2. 字节数
  3. 字符的长度值
  4. bit 数
  5. utf-16编码单元

以前不知道，现代浏览器，准确的应该是 选项3，字符的长度 ，亦或 选项5, utf-16编码单元
字符的个数，并不等于字符的长度，这一点要知道：

  1. "a".length // 1
  2. "人".length // 1
  3. "𠮷".length // 2
  4. "🔴".length // 2

现代浏览器对字符串的处理是基于UTF-16 DOMString[3]。
但是说5M字符串的长度，显然有那么点怪异。
而根据 UTF-16编码规则，要么2个字节，要么四个字节，所以不如说是 10M 的字节数，更为合理。
当然，2个字节作为一个utf-16的字符编码单元，也可以说是 5M 的utf-16的编码单元。
我们先编写一个utf-16字符串计算字节数的方法：非常简单，判断码点决定是2还是4

  2. function sizeofUtf16Bytes(str) {
  3.     var total = 0,
  4.         charCode,
  5.         i,
  6.         len;
  7.     for (i = 0, len = str.length; i < len; i++) {
  8.         charCode = str.charCodeAt(i);
  9.         if (charCode <= 0xffff) {
  10.             total += 2;
  11.         } else {
  12.             total += 4;
  13.         }
  14.     }
  15.     return total;
  16. }

我们再根据10M的字节数来存储
我们留下8个字节数作为key，8个字节可是普通的4个字符串，也可是码点大于65535的3个字符，也可以是组合。
下面的三个组合，都是可以的，

  1. aaaa
  2. aa🔴
  3. 🔴🔴

在此基础上增加任意一个字符，都会报错异常异常。

  2. const charTxt = "人";
  3. let count = (10 * 1024 * 1024 / 2) - 8 / 2;
  4. let content = new Array(count).fill(charTxt).join("");
  5. const key = "aa🔴";
  6. localStorage.clear();
  7. try {
  8.     localStorage.setItem(key, content);
  9. } catch (err) {
  10.     console.log("err", err);
  11. }
  13. const sizeKey = sizeofUtf16Bytes(key);
  14. const contentSize = sizeofUtf16Bytes(content);
  15. console.log("key size:", sizeKey, content.length);
  16. console.log("content size:", contentSize, content.length);
  17. console.log("total size:", sizeKey + contentSize, content.length + key.length);

现代浏览器的情况下：
所以，说是10M的字节数，更为准确，也更容易让人理解。
如果说5M，那其单位就是字符串的长度，而不是字符数。
答案：字符串的长度值, 或者utf-16的编码单元
更合理的答案是 10M字节空间。

localStorage 键占不占存储空间

我们把 key和val各自设置长 2.5M的长度

  1. const charTxt = "a";
  2. let count = (2.5 * 1024 * 1024);
  3. let content = new Array(count).fill(charTxt).join("");
  4. const key = new Array(count).fill(charTxt).join("");
  5. localStorage.clear();
  6. try {
  7.     console.time("setItem")
  8.     localStorage.setItem(key, content);
  9.     console.timeEnd("setItem")
  10. } catch (err) {
  11.     console.log("err code:", err.code);
  12.     console.log("err message:", err.message)
  13. }

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。

执行正常。
我们把content的长度加1， 变为 2.5 M + 1, key的长度依旧是 2.5M的长度

  1. const charTxt = "a";
  2. let count = (2.5 * 1024 * 1024);
  3. let content = new Array(count).fill(charTxt).join("") + 1;
  4. const key = new Array(count).fill(charTxt).join("");
  5. localStorage.clear();
  6. try {
  7.     console.time("setItem")
  8.     localStorage.setItem(key, content);
  9.     console.timeEnd("setItem")
  10. } catch (err) {
  11.     console.log("err code:", err.code);
  12.     console.log("err message:", err.message)
  13. }

50e2202a3882f896e8b2cdc36ef0a9d5.png
产生异常，存储失败。至于更多异常详情吗，参见 localstorage_功能检测[4]：

  1. function storageAvailable(type) {
  2.     var storage;
  3.     try {
  4.         storage = window[type];
  5.         var x = '__storage_test__';
  6.         storage.setItem(x, x);
  7.         storage.removeItem(x);
  8.         return true;
  9.     }
  10.     catch(e) {
  11.         return e instanceof DOMException && (
  12.             // everything except Firefox
  13.             e.code === 22 ||
  14.             // Firefox
  15.             e.code === 1014 ||
  16.             // test name field too, because code might not be present
  17.             // everything except Firefox
  18.             e.name === 'QuotaExceededError' ||
  19.             // Firefox
  20.             e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
  21.             // acknowledge QuotaExceededError only if there's something already stored
  22.             (storage && storage.length !== 0);
  23.     }
  24. }

答案: 占空间

键的数量，对读写的影响

我们500 * 1000键，如下

  1. let keyCount = 500 * 1000;
  3. localStorage.clear();
  4. for (let i = 0; i < keyCount; i++) {
  5.     localStorage.setItem(i, "");
  6. }
  8. setTimeout(() => {
  9.     console.time("save_cost");
  10.     localStorage.setItem("a", "1");
  11.     console.timeEnd("save_cost");
  12. }, 2000)
  15. setTimeout(() => {
  16.     console.time("read_cost");
  17.     localStorage.getItem("a");
  18.     console.timeEnd("read_cost");
  20. }, 2000)
  22. // save_cost: 0.05615234375 ms
  23. // read_cost: 0.008056640625 ms

单独执行保存代码：

  1. localStorage.clear();    
  2. console.time("save_cost");
  3. localStorage.setItem("a", "1");
  4. console.timeEnd("save_cost");
  5. // save_cost: 0.033203125 ms

可以多次测试， 影响肯定是有的，也仅仅是数倍，不是特别的大。
反过来，如果是保存的值比较大呢？

  1. const charTxt = "a";
  2. const count = 5 * 1024 * 1024  - 1
  3. const val1 = new Array(count).fill(charTxt).join("");
  5. setTimeout(() =>{
  6.     localStorage.clear();
  7.     console.time("save_cost_1");
  8.     localStorage.setItem("a", val1);
  9.     console.timeEnd("save_cost_1");
  10. },1000)
  13. setTimeout(() =>{
  14.     localStorage.clear();
  15.     console.time("save_cost_2");
  16.     localStorage.setItem("a", "a");
  17.     console.timeEnd("save_cost_2");
  18. },1000)
  20. // save_cost_1: 12.276123046875 ms
  21. // save_cost_2: 0.010009765625 ms

可以多测试很多次，单次值的大小对存的性能影响非常大，读取也一样，合情合理之中。
所以尽量不要保存大的值，因为其是同步读取，纯大数据，用indexedDB就好。
答案：键的数量对读取性能有影响，但是不大。值的大小对性能影响更大，不建议保存大的数据。

写个方法统计一个localStorage已使用空间

现代浏览器的精写版本：

  1. function sieOfLS() {
  2.     return Object.entries(localStorage).map(v => v.join('')).join('').length;
  3. }

测试代码：

  1. localStorage.clear();
  2. localStorage.setItem("🔴", 1);
  3. localStorage.setItem("🔴🔴🔴🔴🔴🔴🔴🔴", 1111);
  4. console.log("size:", sieOfLS())   // 23
  5. // 🔴*9 + 1 *5 = 2*9 + 1*5 = 23

html的协议标准

WHATWG 超文本应用程序技术工作组 的localstorage[5] 协议定了localStorage的方法，属性等等，并没有明确规定其存储空间。也就导致各个浏览器的最大限制不一样。
其并不是ES的标准。

页面的utf-8编码

我们的html页面，经常会出现。告知浏览器此页面属于什么字符编码格式，下一步浏览器做好解码工作。

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>容器</title>
  6. </head>

这和localStorage的存储没有半毛钱的关系。

localStorage扩容

localStorage的空间是 10M的字节数，一般情况是够用，可是人总是有贪欲。真达到了空间限制，怎么弄？
localStorage扩容就是一个话题。

引用

localStorage[6]

参考资料

  1. localStorage#description: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#description
  2. DOMString: https://developer.mozilla.org/en-US/docs/Web/API/DOMString
  3. DOMString: https://developer.mozilla.org/en-US/docs/Web/API/DOMString
  4. localstorage功能检测: _https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#localstorage%E5%8A%9F%E8%83%BD%E6%A3%80%E6%B5%8B_
  5. localstorage: https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev
  6. localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage