javascript - How to store and update a localStorage key object which has properties of different data types? - Stack Overflow

admin管理员组

文章数量:1391721

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 } }

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

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?

Any help is appreciated.

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 } }

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

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?

Any help is appreciated.

• javascript
• local-storage

Share Improve this question Follow edited Aug 18, 2017 at 7:44 Umesh 2,7422020 silver badges2424 bronze badges asked Aug 18, 2017 at 7:41 user6561572user6561572 33933 silver badges1414 bronze badges 4

• stackoverflow./questions/2010892/… – Dom Commented Aug 18, 2017 at 7:48
• 2 Possible duplicate of Storing Objects in HTML5 localStorage – Dom Commented Aug 18, 2017 at 7:48
• hi, I sow the question ,but that did not helped ,I know how to store an object in localStorage by JSOn parse , but what if I had like the above example ,how can I update the content of user info and then restore it in localstor? – user6561572 Commented Aug 18, 2017 at 7:52
• 1 why the minus ? it is not the same question ! I don't understand! – user6561572 Commented Aug 18, 2017 at 7:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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"
            }
}

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

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.

How do I retrieve and update the localstor object now?

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

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.

Full code here:

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!

本文标签：