前端开发面试中让我使用 JS 计算 LocalStorage 的容量

游客2024-06-17 01:50:00

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

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

本文为译文:

01:什么时候需要关注  空间?

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

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

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

02:如何计算容量

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

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

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

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

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

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

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

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

下面是一段  代码,可帮助您计算  的总容量:

// 要制作精确的 10KB 字符串,我们需要一个长度为 5120 个字符的字符串。UTF-16编码下,每个字符占用2个字节。因此,5120 个字符等于 10240 个字节,相当于 10KB。// 然后,它会重复将此字符串添加到 LocalStorage,直到抛出错误,表明 LocalStorage 已满。const computedTotal = () => {  return new Promise((resolve) => {    let str = "0123456789";    // 首先,我们创建一个10 KB字符串    while (str.length < 5120) {      str += "0123456789";    }    // 清除本地存储    localStorage.clear();    let temp = str;    // 继续将10 KB累积到LocalStore中    const timer = setInterval(() => {      try {        localStorage.setItem("temp", 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编码规则,每个字符()要么是2字节,要么是4字节。因此,官网中所说的 5MB,其单位就是字符串的长度。

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

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

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:计算可用容量

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

下面是执行此计算的 函数:

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})();

前端开发面试中让我使用 JS 计算 LocalStorage 的容量 1