Introduction to HTML LocalStorage API

Web apps can store data locally within the user’s browser instead of storing data in cookies.  LocalStorage is per origin so all pages from an origin can store and access the same data.

The LocalStorage API is used to store key value pairs of data, It also only stores strings, so all data must be converted to strings.

Methods

The methods of the LocalStorage API are:

setItem

The setItem method is used to store a key and its associated value into local storage, if any existing data with the same key exists, it gets overridden with the new value.

syntax

localStorage.setItem(key, value);

getItem

The getItem method is used to retrieve the value associated with a key from local storage, if there is no value associated with the provided key, it returns null.

syntax

localStorage.getItem(key); // returns value associated with key.

removeItem

The removeItem method is used to remove the value associated with a key stored in local storage.

syntax

localStorage.removeItem(key); // removes value associated with key.

clear

The clear method is used to remove all data stored in local storage

syntax

localStorage.clear(); // all data in localstorage is removed, localstorage is now empty.

Common Pitfalls

getItem Always returns value as a string

All data stored in localstorage is stored as strings, data of other types are implicitly converted to strings before being stored.

So if you store a boolean or an int or anything other than a string, you will get back a string when you get it

Example:

var a = true; //a is a boolean
var b = 10; //b is an int
var c; //c is undefined

localStorage.setItem('a',a);
localStorage.setItem('b',b);
localStorage.setItem('c',c);


localStorage.getItem('a'); //returns string 'true'
localStorage.getItem('b'); //returns string '10'
localStorage.getItem('c'); //returns string 'undefined'

Storing Objects

Since localStorage only works with strings, you have to stringify  and parse objects to use them with localStorage

Example:

var obj = {"favorite-color":blue}
localStorage.setItem(obj, JSON.stringify(obj));
obj = JSON.parse(localStorage.getItem(obj));

Browser Quirks

localStorage is supported in almost all browsers, you can find the full list here. But some browsers have some quirks like some versions of iOS store localStorage data in a location that may occasionally be cleared out by the OS.

 
IE11 does not properly synchronize localStorage between different windows

Browsers also set limits (usually 10 Mb) on how much data you can store in localStorage.

Share this!

Leave a Reply

Your email address will not be published. Required fields are marked *