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

Question

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.

https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage#answer-2010948 — Dom, Aug 18 '17 at 07:48
Possible duplicate of [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Dom, Aug 18 '17 at 07: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, Aug 18 '17 at 07:52
why the minus ? it is not the same question ! I don't understand! — user6561572, Aug 18 '17 at 07:55

score 8 · Accepted Answer · answered Aug 19 '17 at 22:48

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!

Hello, I appreciate you for answering my question , your explanation is perfect and your answer is exactly what I nedded ,thank you very much — user6561572, Aug 21 '17 at 03:21
+1 for your answer and your attitude. Your response is technically apt and is also cheerful, observant and accommodating. This approach increases the value of SO. — Mac, Jun 05 '22 at 14:38

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

1 Answers1

Related