Local Storage & Session Storage

HTML5 introduced a Web Storage API that developers can use to store data in the browser. The two flavors of this are Local Storage and Session Storage.

Like cookies, these are stored in key/value pairs consisting of strings and are unique per domain.

Unlike cookies, they are not sent to the server at all. They can be cleared by the developer using JavaScript or by the user in their browser settings.

The only difference between Local Storage and Session Storage is the lifetime of their contents. Local Storage items persist until they are cleared explicitly while Session Storage items persist only during the lifetime of the tab or window. For this reason, most developers prefer Local Storage over Session Storage.

Here are some example use cases:

Storing user-specific view preferences for a site that displays a lot of data and charts

Storing a value to identify mailing list subscribers so we don't display a signup form for existing subscribers

Storing location information so we can display regional content relevant to the user

Storing the contents of a shopping cart while the user is browsing around

Saving progress data for an HTML5 game

Offline web applications

In a nutshell, this is useful for storing data that needs to be read client-side and which the server doesn't necessarily care about.

Methods

Local Storage and Session Storage both extend the Storage prototype so they have the same methods.