localStorage性能？

Question

我正在使用一个名为jQuery的jQuery凤凰插件。它是一个插件，使localStorage与表单非常容易。

我的问题是：

这个脚本每秒钟都会自动保存。我有一个包含大约275个字段的表单，它保存了所有字段。

(我知道保存了很多字段，这些字段往往有点过分，但这是默认设置。我将将其更改为在onblur事件中保存，但每次person更改字段时，它仍将保存275个字段。)

如果它经常保存，我会在浏览器中遇到任何类型的性能问题吗？

我不太了解localStorage，也不知道它是如何影响性能的，尤其是在保存这么多字段的数据时。

Answer 1

如前所述，您可以从建议中对localStorage的使用进行一些优化，但这不是问题所在。

LocalStorage非常快，在这里编写的一些测试中证实了这一点：

https://gomakethings.com/how-fast-is-vanilla-js-localstorage/

他们看到了大约12毫秒的速度来写一个10,000个值的对象，然后再把它读回来。

我有一个剧本，把每一项都存储在它自己的地方，它通常在70-100毫秒之间，但是当你只处理大约300个值时，它小于2ms，如果值是字符串或整数的话，情况也是一样的。

下面是我使用的代码，它主要基于链接文章中的代码：

// Timestamp before the test
var start = performance.now();

// Set/get data to localStorage
var count = 10000;
for (var i = 0; i < count; i++) {
    localStorage.setItem(`perfTest_${i}`, i);
    var result = localStorage.getItem(`perfTest_${i}`);
    if (parseInt(result) !== i) {
        console.error(`${result} !== ${i}`);
    }
}

// Timestamp after the test
var end = performance.now();

// Duration of the test
console.log('It took ' + (end - start) + 'ms.');

运行这些测试的最简单方法就是将它们粘贴到浏览器的控制台中！

Answer 2

1. 性能肯定会有所不同，这将是一个问题，因为localStorage的内部实现是浏览器特有的。
2. 第一次读取和随后读取也有时间差。
3. 除了本地存储器外，容量有限(尽管可以更改)
4. 另外，你也不想在存钱前紧张。这将是低效的。

注：如果所有275个字段都没有同时更改，则只能保存已更改的字段