How to use localStorage

LocalStorage is a type of web storage. It allows you to store and retrieve data in the user’s browser. The main difference to sessionStorage is that the data is persistent and will stay in the browser forever unless explicitly deleted. With sessionStorage the data will be only be available as long as the user keeps the app tab open.

The most important methods of localStorage:


setItem()

You create key/value pair entries with setItem(), providing a key and a value:

// what you need to know about me
let myDetails = {
    name: 'Simona',
    hobbies: ['reading', 'sleeping'],
    cats: ['Fetti', 'Diego'],
    loves: 'Robots'
};

// add key/value pairs to your localStorage
// to store JS objects you need to serialise them first
localStorage.setItem('details', JSON.stringify(myDetails));
localStorage.setItem('favouriteBook', '"Until I Find You", by John Irving');
localStorage.setItem('currentMood', 'grumpy');

You update entries with setItem() using the same key.


getItem()

To retrieve entries you use getItem().

// it's a rainy Saturday evening, what am I going to read?
localStorage.getItem('favouriteBook');

// Remember to deserialise to convert to an object again
JSON.parse(localStorage.getItem('details'));

removeItem()

To delete an entry you use the removeItem() method and pass it the key you want to remove:

// someone gave me chocolate, I am no longer grumpy!
localStorage.removeItem('currentMood');

clear()

The clear() method removes all entries from your localStorage:

localStorage.clear();

Complete Gist


Caveats

rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora