The best approach to accessing local storage

Question

Throughout the network, I have seen 3 approaches to saving and retrieving data from localStorage :

 //As an array localStorage["key"] = "value"; var value = localStorage[key]; //As an object, using properties localStorage.key = value; var value = localStorage.key; //As an object, using getter and setter functions localStorage.setItem("key", "value"); var value = localStorage.getItem("key"); 

From what I know, the first two are equivalent, as an array in JavaScript is treated as an object.

The third option seems to be the best, since the use of getters and setters allows you to encapsulate the logic of functions, as well as the extension.

I hope to get more information about this, can anyone advise?

EDIT: The reason for this question is because localStorage is more than just an array , so I'm looking for opinions that explicitly target localStorage and its implementation.

Answer 1

Your understanding seems to me absolutely correct. What can confuse you is the strange nature of javascript. In javascript, everything is an object, and each object can essentially be treated as a hash map, so your first two examples are equivalent. The last two examples are also virtually equivalent, as they are simply members of the function of the local storage object. Since all the examples have the same effect, I would say that the most important thing is to stay in the code to make it more readable.

Keep in mind that an array is also an object and can be considered as such.

Answer 2

The difference between access to brackets and access to objects by objects is simply a convenience of the language. The difference between direct access to properties and using getter / setter methods is interesting.

The spectrum says:

"Supported property names in a Storage object are the keys of each key / value pair that are currently present in the list associated with the object.

This tells me that direct access is absolutely complete. those. all user agents implementing the specification must support it.

The better. I am not sure what the purpose of the specification is, so to speak. He cannot say how a particular user agent implementation can be biased towards one method or another due to its internal actions. The specification really just defines the interface.

For example, if direct access to properties in a specific user agent simply called getter / setting methods internally, then perhaps using these methods would benefit performance.

Personally, I would use methods, but rejected the functionality in my application to a simple function, which I can change if I need later. eg:

 function getLocal( key ){ return localStorage.getItem(key); } 

If for some reason I find a problem with this or need the support of old browsers (say, when returning to normal cookies), I can just change my application in one place. I know that this is not your question, but it is.

Answer 3

This is how I use it.

 function setLocalObj(id, obj){ if(id && obj) localStorage[id] = JSON.stringify(obj); } function getLocalObj(id){ if(localStorage[id]) return JSON.parse(localStorage[id]); } function removeLocalObj(id){ if(localStorage[id]) localStorage.removeItem(id); } var myObj = { 'val':10, 'str': 'hi there' } setLocalObj('myObj', myObj);