如何存储和更新具有不同数据类型属性的 localStorage 键对象？

Question

这是我第一次使用localStorage，我想存储一个localStorage键，它是一个具有不同数据类型属性的对象，例如键“ localstor”，它是一个包含两个属性的对象：

localstor= { userMsg : String , userInfo : (Object) { ID: String , username: String , pwd :String } }

属性userMsg是类型，String而属性userInfo是类型object。

我知道如何根据此问题设置和获取仅包含对象的项目 ，但就我而言，我不知道如何设置和获取此类密钥？尤其是如果我想更新 localstor 中的对象 userInfo 该怎么做？

任何帮助表示赞赏。

Answer 1

我不知道我是否理解你的问题，如果我理解，请告诉我，以便我可以更正我的答案，但我认为你想要做的是操作你保存在缓存中的项目localStorage，以及这些数据，用于实例，是一个包含多种类型数据的对象。

因此，假设您拥有对象localstor（我添加了一些选项卡，以便更容易查看和调试）；

var localstor = {
  userMsg : "Message",
  userInfo :{
              ID: "SomeID",
              username: "SomeUsername",
              pwd : "SomePassword"
            }
}

将它放入 localStorage 非常容易（正如您所指出的，您已经知道该怎么做），因此您只需要选择一个密钥。在这里，我选择了“obj”作为关键字：

localStorage.setItem("obj", JSON.stringify(localstor));

您可能已经注意到，我使用了一个函数JSON.stringify()。我这样做是因为因为你有一个里面有对象的对象，你需要把它转换成一个字符串来存储它。JavaScript 已经内置了这个功能，所以你不需要安装任何东西。

我现在如何检索和更新 localstor 对象？

好简单。我使用localStorage.getItem()函数检索对象，传递我之前设置的“obj”，这个结果我需要将它转换回 Object 类型（因为我们之前将它存储为 String，还记得吗？）使用该JSON.parse()功能。之后，我可以像编辑任何其他对象一样编辑对象的属性：

localstor = JSON.parse(localStorage.getItem("obj"));
localstor.userInfo.username = "AnotherUsername"; 

我可以将新对象设置回 LocalStorage：

localStorage.setItem("obj", JSON.stringify(localstor));

就是这样！现在当我再次检索它时，用户名的新值将在那里。

完整代码在这里：

var localstor = {
      userMsg : "Message",
      userInfo :{
                  ID: "SomeID",
                  username: "SomeUsername",
                  pwd : "SomePassword"
                }
    }

    //Put the localstor object into the cache
    localStorage.setItem("obj", JSON.stringify(localstor));


    //Retrieve the object
    localstor = JSON.parse(localStorage.getItem("obj"));
    //Change the username property
    localstor.userInfo.username = "AnotherUsername"; 
    //And put the editted object back to cache
    localStorage.setItem("obj", JSON.stringify(localstor)); 

如果您还有任何疑问，请告诉我，以便我以更好的方式回答！