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

Question

Hopefully the title is somewhat clear...dont know how to be more specific.

Here is my problem: I have several different variables that should be passed into the localstorage from one to another Html page. On one (of many) pages, I can (with clickevents) changes values, which should be saved afterwards and being loaded on the next page. If there is no value other then the start value "0", the value 0 should be saved, so the var does not get undefined. Technically the localstorage thing is working with the following code within a function : document.addEventListener('DOMContentLoaded', function():

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

This whole code is most probably not the prettiest thing you have ever seen, but it is working. As I have several variables, which get more and more, I think it would be good to put all of this copy / pasted code for each variable into a function... I tried many things but nothing is working, I do not even get it with the help of ctrl+Shift+I... here is what I was trying:

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

So as you can see, the code is not really different, I just placed the variables and their respective localstorage values into two different arrays. I am not able to understand why the variable XXX get overwriten with the actual value, instead of the value getting assigned to the variable... which is working fine in the "non flexible" solution.

Just to give you the background: It is all about harvesting resources on one page or another (different resources on different locations) and bringing all these information, on the other html pages, to do something with these resources.... Right now I am using vanilla Javascript with the exception of easelJS for some canvas stuff

I would very much appreciate your advice and hope to learn a ton from your answers.

Thanks in advance!

Answer 1

Better try with an object and iterate over the keys (act as the variable names for your example)

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...
    }
}