What is sessionStorage and localStorage?

sessionStorage and localStorage are methods introduced in HTML5 that allow for storing information locally on a user’s computer. The difference between the two is only the time before they expire. sessionStorage is cleared out when a user exits the page and localStorage does not expire until you or the user clears it. Previously the standard, and basically only, way to store data locally with a user was with Cookies. They can only store up to 4kb and are added to every page load of that domain. With sessionStorage or localStorage, you can store up to a whopping 5mb!

The Storing of Things

The storage API is very simple to get started with. First thing to know is that everything must be a key/value pair. Vanilla Javascript can interface with storage simply with localStorage.setItem("foo", "lorem ipsum");

Foo being the key and ‘lorem ipsum’ the value. sessionStorage is done the same way sessionStorage.setItem();

To retrieve items from storage is localStorage.getItem("foo");
And deleting something localStorage.removeItem("foo");

Easy! See the fiddle below for a quick demo on saving, retrieving and deleting. Throw some text in the input, hit save and it will be saved to your localStorage. You can check it with Developer Tools under the Resources tab.

Some Notes on Storing of Things

  • Browser support is actually super good! The usual suspects like Chrome, Firefox and Safari all support it and IE is good from 8.0 and up.
  • Stored values will always be stored as strings, if trying to save and retrieve something other than a string you must parse it on retrieval.
  • Remember 5mb limit!
  • Don’t store anything actually important, a user clearing browser history or a reset of settings might wipe it out.

Real World Use Examples

Say we have a webapp where users input their twitter username and then get some stats related to their account back. Returning users would probably be inputting the same username again. So after the first time they enter their username, lets just store it to localStorage and if they return we can autopopulate the input. It’s really the little things that count.

Use it to cache stuff! Tests have shown that the storage API can outperform native browser caching especially on mobile devices. Article here with some test numbers. Remember, “The fastest HTTP request is the one not made.”

Or you built a simple but stateless browser-based game. You could add game save states or a local high score list easily with localStorage. Users could be asked if they would like to resume a game or start a new one if they left in the middle of a game. No server storage or databases needed.

localBook Demo

I built a crude text editor that uses localStorage for saving data and jquery-notebook for actual editing. Check out the demo here and find the git repo here.

Resources

localForage
In addition to localStorage, many browsers offer local storage solutions like IndexedDB or WebSQL. localForage automatically detects and stores data to the best available option using a simple API.

basket.js
Helps leverage localStorage as a resource and script loader.

lawnchair
Kinda like couchDB except smaller, get the name? Utilizes JSON for clientside document storage.