HTML Dog
Skip to navigation

Local Storage

When building more complex JavaScript applications that run in a user’s browser it’s very useful to be able to store information in the browser, so that the information can be shared across different pages and browsing sessions.

In the recent past this would have only been possible with cookies - text files saved to a user’s computer - but the way of managing these with JavaScript was not good. Now there’s a new technology called local storage that does a similar thing, but with an easier-to-use interface.

To save some data, use localStorage.setItem.


localStorage.setItem('name', 'tom');

The first argument is the identifier you’ll later use to get the data out again. The second is the data you want to store.

Getting back out again is simple — just pass the identifier to localStorage.getItem.


var name = localStorage.getItem('name');

Local storage can only save strings, so storing objects requires that they be turned into strings using JSON.stringify - you can’t ask local storage to store an object directly because it’ll store “[object Object]”, which isn’t right at all!

That also means the object must be run through JSON.parse on the way out of local storage. You can see this in the example below.


// Object example

localStorage.setItem('user', JSON.stringify({
    username: 'htmldog',
    api_key: 'abc123xyz789'
}));

var user = JSON.parse(localStorage.getItem('user'));