本周我需要测试js将数据存储到空间已满的localStorage中的表现,为此,我想找到一种使用 JavaScript 将 localStorage 空间填满的方法。
我们知道检测 localStorage 何时已满的唯一方法是在调用 localStorage.setItem
时捕获 QuotaExceededError
,我最初的想法是编写一个循环,逐字节增加 localStorage 大小直到它已满,例如:
但是,逐字节写入并不是一个好的选择。它的效率非常低,很容易使浏览器崩溃。
因此,受这个 StackOverflow 答案的启发,我选择先存储较大的字符串,然后回退到较小的字符串,直到 localStorage 已满:
请注意,这个解决方案有一个很小的边缘情况,其中
fillLocalStorage
没有 100% 填充 localStorage:由于浏览器包含确定 localStorage 大小的值和键,在极少数情况下,可能会报告存储空间已满但可能还剩下大约 3 个字节。
上面的片段肯定可以被优化,但效果还行,这就是我最初在这篇文章中建议的。到我在 Reddit 上分享了它,其中 u/kyle1320和/u/palparepa提出了一种更优雅的方法:先找到最高阶的位,然后以递减的方式测试每个位,直到localStorage满了为止。
这种方法比我上面建议的方法性能更高,因为它涉及更少的分配和迭代,它使用单个 localStorage 项,并且还解决了我刚才提到的边缘情况。
Puppeteer 和 Playwright 中的示例用法:
我用 chrome 测试了下,他的 localStorage 空间是5M。
[1]
StackOverflow 答案: https://stackoverflow.com/a/45760532[2]
u/kyle1320: https://old.reddit.com/user/kyle1320[3]
/u/palparepa: https://old.reddit.com/user/palparepa[4]
Puppeteer: https://github.com/puppeteer/puppeteer[5]
Playwright: https://github.com/microsoft/playwright