javascript - 初始化对象内的数组，在 localStorage 中使用

Question

孤立问题:

user[username] = { 
  cool: true,
  stuff: false,
  arrData: []
};

我正在尝试全局初始化我的 arrData 数组，以便填充到不同的范围内；以下不起作用。

let user.arrData = [],

稍后我想执行以下操作，以了解上下文:

...........
  inputs.forEach(function(input){
      user = JSON.parse(localStorage.getItem(username)); // tried moving this here
      user.arrData.push({ id: input.id, checked: input.checked });
      // the above errors on .arrData cannot push undefined, I have tried also including the key here, how is this done?
  });
  localStorage.setItem(user, JSON.stringify(user.arrData));
  console.log({ arrData: user.arrData }); // returns undefined
............

子问题:我可以像这样使用 localStorage 设置和检索 object.array 吗？意思是我对 (user.arrData) 的引用？

<小时/>

上下文/实际代码:

下面是上下文的完整相关代码:我试图使用本地存储保存每个用户的一系列复选框状态，然后在单击按钮时重新加载它们。

let user = {};
var savebtnBM = document.getElementById("savebtnBM");
const username = document.querySelector("span.name").textContent;

user[username] = { 
   cool: true,
   stuff: false,
   arrData: []
};

var layersMod =  document.querySelectorAll(".layers #savebtnBM")[0];
layersMod.addEventListener('click', ()=>{ 
setTimeout(
  function() {
    Saver();
  }, 2000);
});

function Saver() { 
  var inputs = document.querySelectorAll('input[type="checkbox"]');
  // var arrData = [];
  inputs.forEach(function(input){
    user[username].arrData.push({ id: input.id, checked: input.checked });
  });
  localStorage.setItem(user, JSON.stringify(user.arrData));
  console.log(JSON.stringify(user.arrData));
}

var etHOME= document.getElementById("et-phone-home");
etHOME.addEventListener('click', ()=>{
    user = JSON.parse(localStorage.getItem(username));
    console.log(user);
    document.getElementsByClassName("big-button")[0].click();
    setTimeout(load_, 2000);

    function load_() {
      var inputs = JSON.parse(localStorage.getItem(user));
      inputs.forEach(function(input){
        document.getElementById(input.id).checked = input.checked;
        load__();
      });
    function load__() { 
        var elems = document.querySelectorAll('input:checked');
        for(var i = 0; i<elems.length; i++) {
          elems[i].click();
        }
      }
    } 
});

Answer 1

子问题回复:

<小时/>

localStorage 和 sessionStorage 只能处理字符串。

因此，首先我们必须使用 JSON.stringify() 将对象转换为字符串，如下例所示:

localStorage.setItem('user', JSON.stringify(user));

当涉及到获取之前保存的内容时，我们使用 JSON.parse() 执行相反的操作:

//...
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log({ arrData: storedUser.arrData });