localStorage

localStorage and sessionStorage are areas in the browser that are like a big object but they only contain strings. These are in key / value pairs.

In sessionStorage the data stored persists only as long as the browser tab is open. Once closed the data is lost. localStorage data will persist as long as the browser does, which can be years.

Data from these two areas is much faster to get than it would be from a server.

What can be stored is related to the origin. The origin is made up of 3 parts: The host (url), the port number and the protocol (http or https). So localStorage set on this page will persist thoughout the site as long as the port number and protocol (https) remain the same. However it is not the same as that stored on a different subdomain.

In the browser

You can find the data for cookies, session storage and local storage under the Storage tab in Firefox dev tools or the Application tab in Chrome.

localStorage, cookies and sessionStorage

There are three ways to store information in the browser: cookies, localstorage and sessionstorage.

Using localStorage and sessionStorage

localStorage is persistant meaning that values stored there will stay forever until removed. There is a storage limit of 10mbs.

sessionStorage ends when the browser is closed and only works in the same tab.

Methods

There are several methods both the localStorage and sessionStorage objects. They work the same way with the same methods:

method	what it does	example
`localStorage.setItem()`	adds a key/value pair to localStorage	`localStorage.setItem('name', 'John');`
`localStorage.getItem()`	gets the item by key name	`localStorage.getItem('name');`
`localStorage.removeItem()`	removes the item by key name	`localStorage.removeItem('name');`
`localStorage.length()`	the number of stored items	`localStorage.length();`
`localStorage.key()`	takes the position of the key and returns its value	`localStorage(0);`
`localStorage.clear()`	removes all localStorage items

Use setItem() to add something to local storage. It takes two parameters a key and a value.

Just like any variable the key used to retrieve or remove something and the value is what is returned.

localStorage.setItem('name', 'John Doe');

NB. Both key and value are in inverted commas.

To overwrite the value just do the same again with a different value.

To retrieve an item just use getItem with the key:

localStorage.getItem('name');

You can check this is working by using console.log

console.log(localStorage.getItem('name'));

To remove an item just use

localStorage.remove('name');

Alternative syntax

There are several different syntaxes to access localStorage. For instance to set an item:

localStorage.name = 'John Doe';
localStorage['name'] = 'John Doe';
localStorage.setItem('name','John Doe');

It’s also possible to access localStorage with object-like syntax:

to retrieve the item: localStorage.name;
to delete that key: delete localStorage.name;

However there is a risk with these since the key name can be any string including camel case or a JS keyword and so might not work using this method.

Usage

Think of both localStorage and sessionStorage as JavaScript or JSON objects and you have key/value pairs which you can add or remove.

Cookies

Cookies work differently to localStorage and use a different syntax.

document.cookie = 'name=John; expires=' = new Date(2025, 0, 1).toUTCString';

Getting around the limitation

At first it might seem that localStorage and sessionStorage are a bit limited in that you can only add simple key/value pairs. You can’t add an array or a JavaScript object.

However this limitation can be circumvented using two methods: JSON.stringify() and JSON.parse().

JSON.stringify() can take any JavaScript and turn it into a string. It can then be used as the value of key/value pair for localStorage or sessionStorage.

When this is retrieved the value can be changed back from a string to JavaScript using JSON.parse().

To store an array in localStorage using JSON.stringify():

let myArray = ['fish', 'jug', 'parsnip', 'bedfellow'];

localStorage.setItem('items', JSON.stringify(myArray));

To reverse the process and retrieve an item from localStorage to be used in JavaScript..

myArray = JSON.parse(localStorage.getItem('items'));

Add to local storage

Add a key word on the left and a value for the key on the right. You can check local storage in the browser dev tools. In Firefox look under

Insert data

Local Storage output