Codular

HomeWriters RSS

Getting Started with LocalStorage

Introduction

There are lots of different ways to store data on a user's machine from your website. Cookies have been around for ages and are widely used however they have size limits. local storage and session storage are two solutions for storing larger amounts of data, and can be used just as easily as (if not more easily than) cookies.

Local or Session

Both of these work pretty much the same except they have differences in scope and lifetime.

Local storage

Session storage

We'll be focussing on local storage for this, but where you see the localStorage object used, you can replace that with sessionStorage - both objects have the same methods.

We store with keys...

For those of you that don't know how this works, every item we store has a corresponding key. One key has one value - this value can only be a string, but we are able to store objects and arrays if we convert them into JSON. If we use a value that is not a string, it will be converted to a string - ie using an integer of 1 will become a string 1.

Let's say we want to store the favourite food of our visitor - and they love bacon - we'd use a key of fav_food (or equivalent) and the value would be bacon. Keys that we use must also be strings, much like the values, they will be converted to strings if they are not.

Using localStorage

We will be using the object localStorage with various methods, the two that we're mainly interested in are setItem() and getItem(), there are a few others that we'll touch on.

setItem()

This does what it says on the tin, it sets an item by providing it two parameters - the first being the key, the second being the value. Taking the above food and bacon scenario we'd come up with:

localStorage.setItem('fav_food', 'bacon');

That's the job done, nothing else to write to actually save data to storage.

getItem()

Here we pass the method one parameter, the key that we want to get the value for - this will then return the value:

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

Simple as that, we can now store and retrieve data from the storage, but what if we want to start deleting it?

removeItem()

As with the getItem() method, this method accepts one parameter - the key - and the value is then removed completely. Let's say the user decides they don't want to store their favourite food anymore, we'll remove the item:

localStorage.removeItem('fav_food');

Do we have to loop through all of the items to clear every stored item? Nope, we have a nice simple method that we can use.

clear()

No parameters are passed to this method, we simply execute it and all of the data that has been stored is removed:

localStorage.clear();

This will remove all the data, so becareful using it - it might lead to undesired results.

Checking for Support

Local storage is supported by a large number of modern browsers and non-compatibility might not be something you have to deal with. However if you unfortunatley have to work with browsers that don't support this feature you will want to check for support:

window.localStorage === null

We simply check if the localStorage object exists - that's all that there is to it!

Note: There are some reported issues with iOS and local storage not actually being persistent. This seems to be down in part to thow iOS stores the local storage data and it being removed wih some temporary caches that safari has when the phone frees us space.

Something Extra

What do we do if we don't know the key of each item? We can loop through all of the items that we have stored in local storage so far by looping through up to the localStorage.length value.

The localStorage object also contains a cunning method that will provide us the key at a given integer, the below code would give us the second stored item:

localStorage.key(1);

We can loop through all of the local storage data and output the keys for them using the below code:

for(var i = 0; i < localStorage.length; i++){
    console.log(localStorage.key(i));
}

We can then use that key to obtain the value if we so wish.

Conclusion

You can use this for anything and everything - perhaps use sessionStorage while someone is filling out a form on your page so that if they accidentally refresh the page, their data will still be there.

Local storage is used by some mobile web apps to store data that you've loaded so that on subsequent page loads they don't have to load as much data through a web request.

Tag: JavaScript