在更复杂的场景中加入 localStorage（保存多个数组）

Question

我正在尝试在我的程序中实现本地存储。

最初，程序很简单，只需要保存 1 个数组。该数组用作容器，然后将容器馈送到 #1 - 显示输出和 #2 - 控制台输出...

old simpler program

pseudo-code to make the red box go away...

上面的链接最终成功了——正如你在 JS 的第 54 行看到的那样，只要在输入框中输入新条目，更新的容器就会保存到 localStorage。然后在返回站点时，根据第 11 行 - 如果在程序初始加载时保存的 localStorage 容器与初始数组不匹配，则使用保存的容器。

但是，我已经彻底改变了程序，现在有多个选项可供选择，因此有多个数组。无论选择哪个选项/数组都会成为主容器，并且主容器仍然会输出到显示输出和控制台输出。请参阅下面的更新程序...

multiple arrays = more complicated program

pseudo-code

问题是我现在很难弄清楚如何在这个新的更新程序上实现 localStorage。以前当我只有 1 个要测试的数组时，这要容易得多。现在，我不能在任何时候输入（或删除）新条目时保存容器，因为容器可以是 6 个选项中的任何一个。

对于我能做什么，有没有人有任何一般的想法/指针/建议？

Answer 1

最简单（也许不是最有效）的选择是使用数组数组。如果之前有：

var container = ["a", "b", "c"];
localStorage.setItem("container", JSON.stringify(container));

你现在有：

var container = [
   ["a", "b", "c"],
   ["d", "e", "f"]
];
localStorage.setItem("container", JSON.stringify(container));

然后，为了在新代码中添加一个，您只需：

var container = JSON.parse(localStorage.getItem('container'));  //The same as before
var firstItem = container[0];

希望这会有所帮助。干杯

Answer 2

为什么不直接创建一个包含多个数组的 JSON 对象，并将整个字符串化对象保存在 localStorage 变量中，而不是那个一维数组中。它甚至可以有一个引用所选容器的参数，并且可以构造如下：

var containers = {
    selectedContainer: "container1",
    container1: ["text","contents","of","container1"],
    container2: ["text","contents","of","container2"],
    container3: ["text","contents","of","container3"],
    container4: ["text","contents","of","container4"],
    container5: ["text","contents","of","container5"],
    container6: ["text","contents","of","container6"]
}

然后可以将内容推送和弹出到这些容器数组中的每一个，并将整个对象保存在单个 localStorage 变量中：

containers.container1.push("additional contents"); 
localStorage['containers'] = JSON.stringify(containers);

obj = JSON.parse(localStorage['containers']);

然后您可以使用 selectedContainer 参数引用选定的数组：

var container = (obj[obj.selectedContainer])