DEV Community

Cover image for Vanilla JavaScript localStorage
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

 

Vanilla JavaScript localStorage

Now and then, it would help if you stored a small variable for later on. Might be, for instance, a cookie bar status, a shopping cart, or whatever. We can use the localStorage API for this in JavaScript.

JavaScript localStorage methods

The JavaScript localStorage comes with the following methods we can use and leverage;

  • setItem(key, value) Allow us to set a value for a specific key we pass.
  • getItem(key) Retrieve a specific item value based on the key.
  • removeItem(key) Remove an item from localStorage based on the key.
  • clear() Clears all localStorage we setup.
  • key() Retrieves the key name on a specific number.

Let's put it to the test and set and retrieve data.

setItem(key, value)

To set a specific value for a key we can do the following:

window.localStorage.setItem('mood', '😃');
Enter fullscreen mode Exit fullscreen mode

But sometimes we want to save an object we can do as such:

var person = {
  name: 'Chris',
  mood: '🤩'
};
window.localStorage.setItem('person', JSON.stringify(person));
Enter fullscreen mode Exit fullscreen mode

getItem(key)

To retrieve an item we need the key we used to identify:

console.log(window.localStorage.getItem('mood')); // 😃
Enter fullscreen mode Exit fullscreen mode

Or for the Object:

console.log(JSON.parse(window.localStorage.getItem('person'))); // {name: "Chris", mood: "🤩"}
Enter fullscreen mode Exit fullscreen mode

removeItem(key)

Once we are done with a specific item, we can remove it, but calling removeItem and passing the key.

window.localStorage.removeItem('mood');
Enter fullscreen mode Exit fullscreen mode

clear()

Or if we want to clear all the localStorage, we can use the following method:

window.localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

Feel free to play around with this Codepen.

See the Pen Vanilla JavaScript localStorage by Chris Bongers (@rebelchris) on CodePen.

Browser Support

The browser support is relatively good we can check if the browser supports it with the following code:

if (typeof Storage !== 'undefined') {
  // Yeah! It is supported. 🥳
} else {
  // No web storage Support. 😞
}
Enter fullscreen mode Exit fullscreen mode

View on CanIUse

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (4)

Collapse
 
curiouskaran profile image
Karan Sharma

localStorage has many gotchas around it like different behavior in different browsers when localStorage is full also in browsers like safari you can't access or set localStorage when in incognito mode.

Collapse
 
merri profile image
Vesa Piittinen

And here is the shortest code to check to see if you can actually use the localStorage:

// usage: put return value to a variable or use as a if condition
!function(l){try{(l=localStorage).removeItem(l._='_')}catch(e){return 1}}()

You could also write a wrapper that would take care of cases like running out of localStorage space, but that is quite an overkill for most use cases. In the other hand if you do have lots of localStorage usage and/or need the abstraction (for code readability/maintenance reasons) then it will probably be worth it over a simple boolean check like the above.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Very nice quick check! Love it <3

Collapse
 
dailydevtips1 profile image
Chris Bongers

It all comes with downsides indeed!
Not the most reliable storage, but a good alternative to keep in mind.