javascript - 无法使用本地存储设置变量

Question

我使用 localstorage 来存储和访问我的函数中的数据，但只有一个变量是存储和可读的，另一个是存储的，但我不知道为什么我可以存储它(当我重新加载页面时它正在工作)。我在 chrome 的调试面板中看到了我的变量存储

像这样存储我的数据

 localStorage.setItem('user', JSON.stringify(user)); //data in json from API

 var obj = {
                    nom: user.nom,
                    prenom: user.prenom,
                    mail: user.mail,
                    username: user.username,
                    hasNewsletter : user.hasNewsletter,
                    coordonnee: user.coodonnee,
                    id: user.id
                };
  localStorage.setItem('userDatax', JSON.stringify(obj)); // data of an other API

这部分代码在我的主页中

   this.state ={
      nfoUser: JSON.parse(localStorage.getItem('user')),
      userDatax: JSON.parse(localStorage.getItem('userDatax'))
   }
//and i my render

console.log(this.state.userDatax, "user DATA") //NO DATA TILL RELOAD
console.log(this.state.nfoUser, "user vfo") // DATA

有什么想法吗？

图片显示了 localStorage.setItem 之后的本地存储

Answer 1

似乎存在时间问题。

如果对属性 undefined object 进行 JSON.stringify，则会得到一个空数组:

var user = {nom: undefined};
console.log(JSON.stringify( user));

记录“{}”。

这意味着当 localstorage 最初使用派生自没有或未定义属性值的 user 对象的 obj 进行设置时，第一个 API 尚未响应。说它在页面重新加载时起作用意味着此时 user 已更新，obj 已更新，并且 localStorage 已更新。

请注意，登录到控制台的对象可以显示调用 console.log 后更新的属性值。确切的影响可能很难预测，但如果您更新本地存储，并单击现有日志条目上的展开箭头，在某些情况下您可以看到更新的值。

要调试并查看特定时间的本地存储，请在记录之前将其转换为字符串:

console.log( JSON.stringify( localStorage), "debug message");