Is localStorage.getItem(‘item’) better than localStorage.item or localStorage[‘item’]?

by

Both direct property access (localStorage.foo or localStorage['foo']) and using the functional interface (localStorage.getItem('foo')) work fine. Both are standard and cross-browser compatible.* According to the spec:

The supported property names on a Storage object are the keys of each key/value pair currently present in the list associated with the object, in the order that the keys were last added to the storage area.

They just behave differently when no key/value pair is found with the requested name. For example, if key 'foo' does not exist, var a = localStorage.foo; will result in a being undefined, while var a = localStorage.getItem('foo'); will result in a having the value null. As you have discovered, undefined and null are not interchangeable in JavaScript. 🙂

EDIT: As Christoph points out in his answer, the functional interface is the only way to reliably store and retrieve values under keys equal to the predefined properties of localStorage. (There are six of these: length, key, setItem, getItem, removeItem, and clear.) So, for instance, the following will always work:

localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));

Note in particular that the first statement will not affect the property localStorage.length (except perhaps incrementing it if there was no key 'length' already in localStorage). In this respect, the spec seems to be internally inconsistent.

However, the following will probably not do what you want:

localStorage.length = 2;
console.log(localStorage.length);

Interestingly, the first is a no-op in Chrome, but is synonymous with the functional call in Firefox. The second will always log the number of keys present in localStorage.

* This is true for browsers that support web storage in the first place. (This includes pretty much all modern desktop and mobile browsers.) For environments that simulate local storage using cookies or other techniques, the behavior depends on the shim that is used. Several polyfills for localStorage can be found here.

More Related Contents:

  1. how to store new elements added in webpage by user? [closed]
  2. What is the max size of localStorage values?
  3. Why avoid increment (“++”) and decrement (“–“) operators in JavaScript?
  4. What does a tilde do when it precedes an expression?
  5. use localStorage across subdomains
  6. Get HTML5 localStorage keys
  7. How to delete a localStorage item when the browser window/tab is closed?
  8. How persistent is localStorage?
  9. cross domain localstorage with javascript
  10. HTML5 Local Storage fallback solutions [closed]
  11. Advanced JavaScript: Why is this function wrapped in parentheses? [duplicate]
  12. difference between dot notation and bracket notation in javascript [duplicate]
  13. Do I have to store tokens in cookies or localstorage or session?
  14. Difference between var and this in Javascript functions?
  15. localStorage access from local file
  16. “elseif” syntax in JavaScript
  17. What is the decimal separator symbol in JavaScript?
  18. useEffect does not listen for localStorage
  19. How to retrieve all localStorage items without knowing the keys in advance?
  20. What is “?:” notation in JavaScript?
  21. ES6+ javascript module export options
  22. How can I request an increase to the HTML5 localstorage size on iPad, like the FT web app does?
  23. Listen for changes with localStorage on the same window
  24. javascript syntax: function calls and using parenthesis
  25. JavaScript dot notation [duplicate]
  26. Javascript history.PushState not working?
  27. Why do two web pages have different localStorage? How can I fix this?
  28. + operator before expression in javascript: what does it do?
  29. Push JSON Objects to array in localStorage
  30. Save data to local storage

Leave a Comment