不管你信不信，面试官让我使用 JS 计算 LocalStorage 的容量！

现在的面试总会遇到很多“奇葩”的问题，不过本着“存在即合理”的态度，从“深入JS”的角度来看，这些个性化的面试题还是挺有意思的。

所以，咱们今天就来看一个“奇葩”面试题：如何使用JS来计算LocalStorage的容量

本文为译文：https://javascript.plainenglish.io/believe-it-or-not-interviewer-asks-me-to-calculate-localstorage-capacity-using-javascript-12928482e096

01：什么时候需要关注 LocalStorage 空间？

LocalStorage 是浏览器提供的一种本地会话存储的方式，最大支持 5M 的存储空间。

虽说它的存储空间是有上限的，但是我相信很多同学都和我一样，在日常开发中其实并没有关注过这个问题。毕竟 5M 的默认存储针对数据而言已经非常大了。

但是，如果你在面对一些足够复杂的项目，涉及到大量的数据本地存储且没有使用 IndexDB 的前提下，那么关注 LocalStorage 存储空间位置，就变得有意义了。

02：如何计算容量

为了计算总容量，我们将使用 10KB 为单位，相当于 10240 字节。我们将不断向 LocalStorage 添加 10KB 块，直到它已满并引发错误。此时，我们统计所有累积的数据，这就是总存储量！

在 JavaScript 中，字符串使用 UTF-16 编码存储。这意味着每个字符通常占用 2 个字节的内存空间。但是，对于某些特殊字符（例如表情符号或某些不太常见的语言字符），它们可能最多使用 4 个字节。

代码语言：javascript

复制

"a".length // 1
"🔴".length // 2

要估计字符串占用的内存空间（以字节为单位），可以将字符串的长度乘以字符的平均字节大小。对于常规字符集（不包括特殊字符），我们可以这样估计：

代码语言：javascript

复制

var str = "Hello, World!";
var bytes = str.length * 2; // 2 bytes 
console.log(bytes + " bytes"); // 输出: 26 bytes

要计算以千字节 (KB) 为单位的大小，可以将字节总数除以 1024（1 KB = 1024 字节）

代码语言：javascript

复制

var kb = bytes / 1024;
console.log(kb + " KB"); // 输出: 0.025 KB

注意：这是一个粗略的估计。由于 JavaScript 引擎的实现、字符串中是否存在特殊字符以及其他因素，实际消耗的内存可能会有所不同。

下面是一段 JavaScript 代码，可帮助您计算 LocalStorage 的总容量：

代码语言：javascript

复制

// 要制作精确的 10KB 字符串，我们需要一个长度为 5120 个字符的字符串。UTF-16编码下，每个字符占用2个字节。因此，5120 个字符等于 10240 个字节，相当于 10KB。
// 然后，它会重复将此字符串添加到 LocalStorage，直到抛出错误，表明 LocalStorage 已满。
const computedTotal = () => {

return new Promise((resolve) => {

let str = "0123456789";
// 首先，我们创建一个10 KB字符串
while (str.length &lt; 5120) {
  str += &#34;0123456789&#34;;
}

// 清除本地存储
localStorage.clear();

let temp = str;

// 继续将10 KB累积到LocalStore中
const timer = setInterval(() =&gt; {
  try {
    localStorage.setItem(&#34;temp&#34;, temp);
    temp += str; // 将另外10 KB添加到临时字符串
  } catch {
    // 如果抛出错误，这意味着我们已经超出了最大存储空间
    // 考虑每个字符为2字节，以KB为单位计算大小
    resolve((temp.length * 2) / 1024);
    clearInterval(timer);
    // 计算后记得清除LocalStore
    localStorage.clear();
  }
}, 0);

});

};
(async () => {

const total = await computedTotal();

console.log(最大容量: ${total}KB); // 10240KB

})();

注意：

运行该函数后，我们看到结果是10MB的字节数，这偏离了众所周知的 5MB 限制。

根据UTF-16编码规则，每个字符(chart)要么是2字节，要么是4字节。因此，官网中所说的 5MB，其单位就是字符串的长度。

03：如何计算已使用的容量

要计算已使用的容量，我们需要做的就是迭代 LocalStorage 上的存储属性并计算每个存储属性的长度。将它们全部加起来就得到了总已用容量！

代码语言：javascript

复制

const computedUse = () => {

let cache = 0;

// 循环访问LocalStore中的所有 key

for(let key in localStorage) {

// 检查 key 是否是LocalStore的一部分（而不是其原型）

if (localStorage.hasOwnProperty(key)) {

// 将每个项目的长度添加到总缓存中

cache += localStorage.getItem(key).length * 2; // 每个字符计为2个字节

}

}

// 将总数从字节转换为千字节并固定为2位小数

return (cache / 1024).toFixed(2);

};
(async () => {

// 创建一个大字符串“o”用于测试目的

let o = '0123456789';

for(let i = 0 ; i < 1000; i++) {

o += '0123456789';

}
// 将大字符串存储在LocalStore中

localStorage.setItem('o', o);
// 计算使用容量

const useCache = computedUse();

console.log(计算结果: ${useCache}KB); // 19.55KB

})();

04：计算可用容量

在确定了 LocalStorage 的总容量和已用容量后，我们可以通过从总容量中减去已用容量来轻松计算剩余可用容量。

下面是执行此计算的JavaScript 函数：

代码语言：javascript

复制

const computedsurplus = (total, use) => {

return total - use;

};
(async () => {

// 计算Local存储总容量

const total = await computedTotal();
// 创建一个大字符串“o”用于测试目的

let o = '0123456789';

for(let i = 0 ; i < 1000; i++) {

o += '0123456789';

}
// 将大字符串存储在LocalStore中

localStorage.setItem('o', o);
// 假设 computedUse 是一个计算已用容量的函数

const useCache = computedUse();
// 计算并记录剩余可用容量

console.log(剩余可用容量: ${computedsurplus(total, useCache)}KB); // 10220.45 KB

})();