How to check if value exist in Local Storage data set?

Question

I have done some research about local storage. Seems like a pretty good option to store data. In my Single Page App I use JSON to store some of the data that is used more than once in my app. I'm wondering if I can replace JSON with Local Storage? Also what would be the benefits? So far I was able to load data in Local Storage but I couldn't check if values exist in Local Storage and how I will read the data. Here is example:

$.ajax({ type: 'POST', url: 'App.cfc?method='+getMethod, data: {'recID':recID}, dataType: 'json' }).done(function(obj){ var numRecs = obj.RECORDCOUNT; jsonData[recID] = obj.DATA; localStorage.setItem(recID,JSON.stringify(obj.DATA)); var firstN = jsonData[recID].hasOwnProperty('F_NAME') == true ? $.trim(jsonData[recID]['F_NAME']['value']) : '', lastN = jsonData[recID].hasOwnProperty('L_NAME') == true ? $.trim(jsonData[recID]['L_NAME']['value']) : ''; console.log(localStorage[recID] +'\n'+ localStorage[recID].hasOwnProperty("L_NAME")); //Check Local Storage if value exist }).fail(function(jqXHR, textStatus, errorThrown){ if(jqXHR.status == 0){ alert("Fail to connect. Please check your internet connection."); }else{ alert("Error: "+errorThrown); } });

Here is example of JSON and localStorage data:

{"F_NAME":{"value":"John"},"L_NAME":{"value":"Smith"}}

Both JSON and local Storage have the same structure after I dumped the data in the console but hasOwnProperty() indicates to false in my code example above where I test loacl storage in console. I'm wondering if my code is invalid or something else is causing my code to fail. Main reason why I would like to use local storage is situation when user loose internet connection. In that case I want to save form data in local storage that way user won;t lose the data. If anyone can provide example or help with any tips please let me know. Thank you!

You can check the local storage in your console by typing in localStorage. In Chrome you can also see your localStorage data from the Application tab in the developer tools. Please note that local storage stores a single item for each key. If you want to store a JSON object in a specific key, make sure you JSON.stringify() it first and parse it when you want to access the information. — FunkyMonk91
– FunkyMonk91, Commented Nov 7, 2017 at 21:05

msanford · Accepted Answer · 2017-11-07 21:14:36Z

localStorage stores strings, which you know since you're already JSON.stringify()ing when you save. But you need to replace your check of

localStorage[recID].hasOwnProperty("L_NAME")

with

JSON.parse(localStorage[recID]).hasOwnProperty("L_NAME")

Edit: You have a whole object which you store as localStorage[recID], so you need to parse that, then access the resulting object, like:

const record = JSON.stringify({ "F_NAME": { "value": "John" }, "L_NAME": { "value": "Smith" } }); console.log(JSON.parse(record)['F_NAME']['value'])

JSON.parse(record) becomes the object, then you access its descendant parameters ['F_NAME']['value']. The placement of the brackets is critical.

How I can access L_NAME value in localStorage? I tried this but code fails: $.trim(JSON.parse(localStorage[recID]['F_NAME']['value']))
I see that placement of the brackets is very important even doesn't look usual :)
It's because you're not parsing localStorage[recID]['F_NAME']['value'], you're parsing only localStorage[recID]. You can accept it if it helped :)

Collectives™ on Stack Overflow

How to check if value exist in Local Storage data set?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related