Javascript变量VS对象存储，用于大数据脚本执行

Question

我实际上在浏览器中运行JS脚本(ES6和Guzzle((它必须在浏览器中运行，而不是NodeJS(。 此脚本正在调用一些 xml 文件，并存储结果以供以后使用(我输出转换和输出，然后对其进行处理以便能够将其导入数据库(。

因此，此脚本将生成一个包含成千上万个小JS对象的数组(来自XML解析(。

由于脚本需要很长时间才能运行，因此我正在循环我的 URL 数组(我有一个所有文件 URL 的列表(，并将查询结果存储到经典的 JS 变量中，并在 jsonEncode 之后进行本地存储。由于它是 JSON 编码的，因此每次都会擦除 localStorage 值，并为同一密钥保存一个新的更大的字符串。

我的问题 ：

• 只使用经典变量更好吗？还是只有本地存储？
• 有没有其他方法可以为脚本存储大量数据？(临时 blob、文本文件、DOM 追加...

从我的测试中，在查询 3-4k 个文件并存储结果后，浏览器开始变慢很多，并大大减少了 HTTP 请求/分钟数。

谢谢！

笔记：

• 它必须在浏览器中运行(我需要一些动态 DOM 数据，它是一个显示统计信息的内部仪表板，其中包含实时设置的用户输入(。
• 它只需要在最新的Chrome或Firefox上运行

Answer 1

每次都会

擦除 localStorage 值，并为同一键保存一个新的更大的字符串。

这种反序列化-追加-序列化过程会减慢页面速度。相反，您可以将每个条目存储在其自己的键中，这样追加的性能要高得多：

class PersistentArray  {
constructor(name) {
this.name = name;
this.length = +localStorage.getItem(name) || 0;
}
push(value) {
set(this.length, value);
}
set(index, value) {
if(index >= this.length)
localStorage.setItem(this.name, this.length = index + 1);
localStorage.setItem(this.name + index, JSON.stringify(value));
}
get(index) {
return JSON.parse(localStorage.getItem(this.name + index));
}
*[Symbol.iterator] () {
for(let i = 0; i < this.length; i++)
yield this.get(i);
}
}

这样，您可以轻松地将值推送为：

const pages = new PersistentArray("pages");
// ... somewhen
pages.push({ value: "whatever" });

当所有数据都在那里时：

// Turn into a real in memoy array:
const result = [...pages];
// Dynamically load:
for(const page of pages) 
console.log(page);