用于大数据脚本执行的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

the localStorage value is erased every time and a new bigger string is saved for the same key.

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

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