Hi everyone, and welcome to another exciting edition of Boring JavaScript. Today, we tackle the ‘localStorage’ object (and touch a little upon ‘sessionStorage’).

Don’t like to read? Then watch our video.

“All Politics Is Local” – Tip O’Neill

‘localStorage’ gives you a way to store keyed string values into a repository that you can retrieve later – even after the browser has been closed down. Think of it like a bookshelf. You can place your book there, leave the room, then return sometime in the future and get that book. ‘localStorage’ works the same way. You can store strings into the storage container, using a key, and then retrieve that string by accessing the key associated with it.

‘localStorage’ is available to you all the time – until you physically remove it or the client does by going into browsers settings and manually clearing out the cache. This makes it a convenient spot to save information from one browser session to another. A good example might be persistent user information. By storing it in localStorage, you will not need to continually retrieve data each time the user logs in, creates another tab, or even moves from one browser page to the next.

A Word About ‘sessionStorage’

You might be thinking at this time – isn’t this just like ‘sessionStorage’? And the answer is ‘Yes’. Both ‘localStorage’ and ‘sessionStorage’ uses the same class (Storage) to save their values.

In fact, everything we do in our examples below also work with ‘sessionStorage’.

The big difference is that ‘sessionStorage’ only lasts the session, while ‘localStorage’ remains. For example, if you write a value to ‘sessionStorage’ and the same value to ‘localStorage’, then close your browser window, all the values in ‘sessionStorage’ will be erased, while ‘localStorage’ will not.

Setting Values

Settings values within ‘localStorage’ is real easy and straight forward.

const key = "cat";
const value = "Fluffy";
localStorage.setItem(key, value);

And that’s it! The method ‘setItem’, which writes values to the ‘localStorage’, takes two string arguments. The first argument is the ‘key’, and this will be used to retrieve values. The second argument is the ‘value’, and is the data you wish to associate with that key.

And how do you get those values?

I Get It, Now!

Getting values is also very simple:

const catName = localStorage.getItem('cat');
console.log(`The name of my cat is '${catName}'.`);

// outputs
// The name of my cat is 'Fluffy'

The ‘getItem()’ method will retrieve the key passed to it as it’s only argument. It will return the value associated with that key, or ‘null’ if that key is not found.

Remove Thyself!

With sessionStorage, all values are deleted when the session ends. Not so with localStorage. They’re around until the cows come home, and then some. So how do you get rid of them?

Two ways. Let’s look at some code:

localStorage.setItem('Cat', 'Fluffy');
localStorage.setItem('Dog', 'Rover');
localStorage.setItem('Horse', 'Mr. Ed');

// at this point, localStorage has three items, 'Cat', 'Dog', and 'Horse'

localStorage.removeItem('Cat');

// at this point, localStorage has two items, 'Dog' and 'Horse'

localStorage.clear();

// at this point, localStorage has NO items whatsoever!

Line 7 is the first of these two ways: removeItem(). It takes one argument, the key you wish to remove. If JavaScript finds that key, it will remove it from localStorage.

Line 11 is the other way – clear(). It removes all items from the localStorage. There’s nothing left after this method is called.

The Video

Here is our video on the subject. Since ‘localStorage’ is a browser-based construct, the examples in the video go into greater detail than they do here. Why? Because we can have more fun with browser apps that with simple blog posts. 🙂

Shameless Plugs

Check us out all over web!

Boring JavaScript (all our videos): https://www.boringjavascript.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

Tagged as: Javascript sessionStorage

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com