初始化对象内的数组，在 localStorage 中使用答案

【问题标题】：initialize array that is within a object, use in localStorage初始化对象内的数组，在 localStorage 中使用
【发布时间】：2020-05-30 08:02:19
【问题描述】：

孤立的问题：

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();
        }
      }
    } 
});

【问题讨论】：

您希望let userA.arrData = [] 的结果是什么？当您定义 user[key] 时，arrData 已经初始化为 []。
控制台说没有定义； arrData，当我将它从用户对象中取出并使用 var arrData = [] 自行初始化时，它会起作用并填充 - 所以它必须是用户对象。
let userA.arrData = [] 的功能是什么？也许你需要user[key].arrData = [];
@LeandroMatilla 和 @igg 我已经为上下文添加了完整的相关代码并修改了 OP。
@CaptainRon 似乎有语法错误。首先定义user，然后尝试访问userA。此外，您依赖document.querySelector 的结果来获取user[username] 的密钥，这很危险。对于初学者，将userA 的每个实例替换为user，看看会发生什么。

标签： javascript arrays local-storage javascript-objects

【解决方案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 });

【讨论】：

谢谢，但是； localStorage.setItem（用户，JSON.stringify（用户））； console.log({ arrData: user.arrData }); -- 目前在我上面的代码中返回未定义。