Question

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

因此，此脚本将生成一个包含成千上万个小型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);

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

1 个答案: