Javascript - 数组 - 将一个数组中的值分配给另一个数组中的字符串

Question

希望标题有点清楚......不知道如何更具体。

这是我的问题: 我有几个不同的变量，应该从一个 Html 页面传递到本地存储中。 在一个(许多)页面上，我可以(使用 clickevents)更改值，这些值应该在之后保存并加载到下一页上。如果除了起始值“0”之外没有其他值，则应保存值 0，这样 var 就不会变得未定义。 从技术上讲，本地存储正在函数中使用以下代码:document.addEventListener('DOMContentLoaded', function():

var XXX;
if (localStorage.XXX> 0){
    XXX= Number(localStorage.XXX);
} else {
    XXX = 0;
}
document.getElementById("XXX").innerText = XXX;

这整个代码很可能不是您见过的最漂亮的东西，但它正在工作。由于我有几个变量，这些变量越来越多，我认为最好将每个变量的所有复制/粘贴代码放入一个函数中......我尝试了很多方法，但没有任何效果，我什至没有得到在 ctrl+Shift+I 的帮助下...这是我正在尝试的:

var resource = ["XXX", "YYY", "ZZZ"];
var localStorageResource = [localStorage.XXX, localStorage.YYY, localStorage.ZZZ];
function getLocalStorage() {
    for (var i = 0; i < resource.length; i++){
        if (localStorageResource[i] > 0){
            resource[i] = Number(localStorageResource[i]);
        } else {
            resource[i] = 0;
        }
        document.getElementById("resource[i]").innerText = resource[i];

正如您所看到的，代码并没有真正的不同，我只是将变量及其各自的本地存储值放入两个不同的数组中。 我无法理解为什么变量 XXX 被实际值覆盖，而不是分配给变量的值......这在“非灵活”解决方案中工作正常。

只是给你介绍一下背景: 这都是关于在一个页面或另一个页面上收集资源(不同位置上的不同资源)并将所有这些信息带到其他 html 页面上，以利用这些资源做一些事情...... 现在我使用普通的 Javascript，除了 easelJS 来处理一些 Canvas 内容

我非常感谢您的建议，并希望从您的回答中学到很多东西。

提前致谢!

Answer 1

最好尝试使用对象并迭代键(充当示例的变量名称)

var resource = {"XXX": 0, "YYY": 0, "ZZZ": 0};

function getLocalStorage() {
    for (var i in resource){ //Variable "i" will be "XXX", "YYY" and "ZZZ" strings in each iteration
        resource[i] = localStorage.getItem(i) || 0; //In the first iteration will assign localStorage.getItem("XXX") to resource.XXX, and so on...
        document.getElementById(i).innerText = resource[i]; //In the first iteration will get element by id="XXX" and assign the value of resource.XXX, and so on...
    }
}