如何存储和更新具有不同数据类型属性的localStorage关键对象? [英] How to store and update a localStorage key object which has properties of different data types?

问题描述

这是我第一次使用localStorage，我想存储一个localStorage键，它是一个具有不同数据类型属性的对象，例如键"localstor"，它是一个包含以下内容的对象两个属性:

this is my first time using localStorage and I would like to store a localStorage key which is an object that has properties of different data types ,for example the key "localstor" ,it is an object containing two properties :

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

属性userMsg的类型为String，而属性userInfo的类型为object.

the property userMsg is of type String while the property userInfo is of type object.

我知道如何设置和获取仅包含基于以下内容的对象的项目 这个问题，但就我而言，我不知道如何设置和获取此问题什么样的钥匙?并且特别是如果我想更新localstor中的对象userInfo怎么办?

I know how to set and get an item containing only objects based on this question , but in my case I don't know how to set and get this kind of key? and espacially if I want to update the object userInfo in localstor how to do that?

感谢您的帮助.

推荐答案

我不知道我是否理解您的问题，如果知道，请告诉我，以便我纠正我的答案，但我认为您在尝试什么要执行的操作是使用localStorage操作保存在缓存中的项目，例如，该数据是一个包含多种类型数据的对象.

因此，假设您有对象localstor(我添加了一些选项卡，因此更易于查看和调试)；

I don't know if I understood your question, and if I did, please tell me so I can correct my answer, but I think what you are trying to do is manipulate an item you kept in cache with localStorage, and this data, for instance, is an object that contains data of multiple types.

So lets say you have your object localstor (I added some tabs so it's easier to see and debug);

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

将其放入localStorage非常容易(正如您所指出的那样，您已经知道该怎么做)，因此您只需要选择一个密钥即可.在这里，我选择"obj"作为键:

Putting it into localStorage is super easy (as you pointed out you already know how to do) so you only need to choose a key. Here, I chose "obj" as key:

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

您可能已经注意到，我使用了功能JSON.stringify(). 我这样做的原因是，由于您有一个内部带有对象的对象，因此需要将其转换为 String 进行存储. JavaScript已内置此功能，因此您无需安装任何东西.

As you might have noticed, I used a function JSON.stringify(). I did it because since you have an object with objects inside, you need to convert it into a String to store it. JavaScript has this function already built-in so you don't need to install anything.

如何立即检索和更新localstor对象?

非常容易. 我使用 localStorage.getItem()函数检索对象，并传递了之前设置的"obj"，因此需要将其转换回Object类型(因为我们将其存储为还记得吗?)使用JSON.parse()函数.之后，我可以像处理任何其他对象一样编辑该对象的属性:

Very easy. I retrieve the object with the localStorage.getItem() function, passing the "obj" I have setted before, and this result I need to convert it back to the Object type (since we stored it as a String before, remember?) using the JSON.parse() function. After that, I can edit the properties of the object as I would do with any other object:

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

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

I can set the new object back to the LocalStorage:

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

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

And that's it! now when I retrieve it again, the new value for username will be there.

完整代码在这里:

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

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

If you have any doubts yet, please tell me so I can answer in a better way!

这篇关于如何存储和更新具有不同数据类型属性的localStorage关键对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！