存储和检索 100 个元素的数组答案

【问题标题】：storing and retrieving 100-element array存储和检索 100 个元素的数组
【发布时间】：2015-10-08 09:51:49
【问题描述】：

我正在使用 Greasemonkey/Tampermonkey 访问页面并根据当前页面上的内容对包含 100 个元素的表格进行更改。

短期存储和数组操作工作正常，但我想永久存储数据。我试过GM_getValue/GM_setValue、GM_SuperValue、localStorage和indexedDB，但我显然缺少一些基本的东西。
似乎没有什么可以让我将数组写入永久存储，然后将其读回一个变量，我可以在其中访问每个元素，这样variablename[32] 实际上是表中的第 32 个元素（好吧，如果你从第 33 个开始计数零，我这样做）。

我需要在脚本运行时访问包含 100 个元素的整个表格，因为我需要在页面本身上输出部分或全部表格。在最基本的情况下，我有一个从 0 到 99 的 for 循环，每次都打印出 variablename[i] 的值。

我对任何方法都没有倾向，我只是希望该死的东西在 Greasemonkey/Tampermonkey 脚本中工作。

在脚本的顶部我有这个：

for (var i = 0; i <= 99; i++) {
    currentData[i] = localStorage.getItem(currentData[i]);
}

上述部分的目的是将这 100 个条目读入currentData 数组。这实际上对我现在不起作用，可能是因为我一开始就没有正确存储东西。

在中间，在修改了其中一个元素后，我想通过这样做来替换它：

localStorage.setItem(
        currentData[specificElementToChange], differentStuff);

上面的目的是改变100行数据中的一个并将其永久存储，因此下次读取顶部的代码时，它将拉出所有100个条目，其中单个元素由上面一行。

这是一般原则。

我不知道我正在做的事情是不是因为 Firefox/Chrome 的一些安全问题或者我想要做什么（永久存储一个数组，每次访问给定页面时，一个元素更改）是不可能的。

使用variable[element] 格式访问数组很重要，但除此之外，我可以通过任何方式存储这些数据并轻松检索它。

【问题讨论】：

localStorage中的item最初是如何设置的？您是在 for 循环之前自己创建它们，还是它们已经存在？您最好将数组存储为一个项目，而不是将每个单独的索引存储为自己的项目。您可以使用 JSON 执行此操作：stackoverflow.com/a/3357615/551093
第一次运行脚本时，我为每个元素设置了默认值。计划是在第一次成功运行后注释掉该行，然后一次只更改一个元素。不过，我从来没有让整个事情顺利进行，所以我从来没有按照计划进行。
将数组存储为一项并不好，因为每个元素本身就是一个定义长度的复杂字符串。我实际上是通过使用一个在每个单独的字符串中有多个条目的一维数组来伪造一个二维数组。或者无论如何都要尝试。存储/读取变量[i]的基本原理是否可行？
我不确定 "定义长度的复杂字符串" 与使用 JSON.stringify() 将其存储为一个项目，然后使用 JSON.parse() 有什么关系把它变成一个数组。我也不明白为什么你需要捏造一个二维数组，而不仅仅是使用一个二维数组。尽管您进行了详细的描述，但从局外人的角度来看，很难弄清楚您实际上要做什么（对不起）。我认为最好的办法是为您创建一个 jsFiddle，其中包含您目前拥有的所有内容（包括 HTML）。这应该有助于我们为您提供帮助。
我真正想做的是存储一个 100 x 200 的数组。我读到你不能存储二维数组，所以我选择了一个包含 100 个元素的数组，每个元素长 200 个字符。也许这是不清楚的想法。但是，我不明白，如果在集合期间简单地调用变量 [i] 将允许我使用相应的 get 恢复变量 [i]。 1 到 100 很容易访问，200 轴很痛苦，但我可以使用 substr 来处理它。至少有一个轴是清晰的。你真的可以设置 variable[x][y] 然后得到 variable[x][y] 并期望返回相同的数据吗？

标签： javascript arrays local-storage greasemonkey tampermonkey

【解决方案1】：

我认为你做错了。 LocalStorage 存储字符串，因此在 LocalStorage 中存储数组的最简单方法是将其字符串化为 JSON 并存储 JSON。然后，在读回它时，您将 JSON 解析回一个数组。

所以，要阅读它，你可以这样做：

var currentData = JSON.parse(localStorage.getItem("currentData") || "[]");

要保存数据，请执行以下操作：

localStorage.setItem("currentData", JSON.stringify(currentData));

工作演示：http://jsfiddle.net/jfriend00/6g5s6k1L/

这样做时，currentData 是一个包含普通数组的变量（在您从 LocalStorage 中读取数据之后）。您可以使用.push() 向其中添加项目，读取具有数字索引的项目，例如：

var lastItem = currentData[currentData.length - 1];

或者，改变数组中的一个项目：

currentData[0] = "newValue";

当然，它只是一个普通的数组，所以你可以在上面使用任何数组方法。

【讨论】：

请原谅我的无知，但我的大脑仍然存在脱节。我看到您如何使用 push 将元素添加到列表中。我可以通过这种方式创建我的初始“数组”。但是我将如何访问和修改该列表中的第 10 个元素，然后将其插入到正确的位置，以便整个元素保持相同的大小，但第 10 个元素不同？我确信这是我从错误的角度看待问题的问题，因此感谢您的耐心等待。
@greenfern - currentData 是一个数组，一旦你加载它，你就可以像访问任何其他数组一样访问它。 var item = currentData[10]; 或 currentData[3] = "foo"; 这一切都取决于你想对数组做什么，但数组通常是通过数字索引访问的。对象通过属性名称访问。
我使用 push 设置了初始值。我使用currentData[x] = "newValue" 更改了一个特定元素，在运行过程中，所有数据都很好。但是当我尝试将其读回时，在下一次使用var currentData = JSON.parse(localStorage.getItem("currentData") || "[]"); 时，数据就不存在了。它是未定义的。这是我一直遇到的同样的问题。在第一次通过时，我以多种方式操纵了数据，但我永远无法在下次单击时成功恢复数据。更改 currentData[x] 的值是否会更改文件中存储的值？
啊哈！我忘记了重要的localStorage.setItem("currentData", JSON.stringify(currentData)); 步骤！该死的东西现在正在工作！感谢您在我用头撞墙时的耐心等待。 jsFiddle 让我明白了。
@greenfern - 每次更改数据时，都必须将其重新保存到 LocalStorage（或在其他方便的时间保存）。该数组只是您的 Javascript 中的一个实时数组。只有当您执行我上面将其保存到 LocalStorage 的行时，它才会保存到 LocalStorage。您不能直接访问 LocalStorage 中的数组，因为 LocalStorage 只存储字符串，而不是数组。