Localstorage vs. Cookies vs. The law

22 October 2012

I guess you know a thing or two about internet, so I don't bother to explain what cookies are. Localstorage though is something not everybody is familiar with. Localstorage is a way to store data on the clients computer. Yes, that's also what cookies do. But they are different and serve different purposes.

A cookie can only be 4 kilobytes big and this is not enough for some applications, a cookie adds load to every page on the same domain (every cookie set by the domain is sent to the server on each request... imagine 10 cookies of 4Kb each being sent with every request...) and because cookies have been used for not-sonice-stuff many people have them turned off in their broswers. Cookies also contain expiration information which allows login information to be automatically removed after a given time.

Localstorage is a new way of storing (structured) data on a clients computer. It allows storage up to 5Mb which is quite a lot more than cookies and more than enough for most applications. Localstorage data is only accessible clientside (i.e. trough javascript) so it doesn't add extra load to pages.

So, cookies and localstorage are not the same, but there is a large overlap in functionality.

I would say localstorage is the best way to store the "state" of your website. And by state I mean the state of elements on your page. For example a list of items that can fold and unfold or a large list with checkboxes to switch certain options on and off. Normally you'd loose all settings when you reload the page (on purpose or accidentally, the latter happens a lot...) Storing the state of these elements serverside is an option, but is really unwieldy. It would result in a really large database ánd you need to make a connection between the data stored and the website visitor, which means you need to always let the user create some sort of account.

Storing all this data in a cookie is also an option, but since we already discovered this adds load ánd isn't available on many computers due to security restrictions we should use localstorage.

localstorage


But is it hard to use localstorage? No. It is really easy, as a matter of fact. Let me show you with some examples:

localStorage.setItem("fontsize", "16px");

This would set a key "fontsize" with the value "16px" on the clients computer. You could use this information to let the users set their own fontsize on your website, for example.

var fontsize = localStorage.getItem("fontsize");
document.body.fontSize = fontsize;

And this is what you need to do to retreive the set item. That's all. The first line gets the fontsize site by the user, and the second line aplies it to the body.

That's easy, isn't it?

Objects



But what if you've built a more complex application which stores all values in an object? Let's take this simple example with a object representing a car with a few attributes:

var car = {
  brand: 'subaru',
  type: 'impreza turbo',
  horsepower: 'one billion'
}
localStorage.setItem("myCar", car);

If you'd store it like this and get it later, it would return this:

[object Object]

Since all values stored in localstorage are string-only, the object gets converted and saved as a string "[object Object]". That's not what we want. To store objects, you need to convert the object to a JSON string first:

var car = {
  brand: 'subaru',
  type: 'impreza turbo',
  horsepower: 'one billion'
}
localStorage.setItem("myCar", JSON.stringify(car));

When you get this value and display it, it would look like this:

{"brand":"subaru","type":"impreza turbo","horsepower":"one billion"}

Also not really what we want, so we need to convert it back to an object before using it:

var savedCar = JSON.parse(localStorage.getItem( 'car' ));

This will store the saved car object in the variable savedCar for you to use in your application.

I am the law


But what about the law? Since cookies and localstorage look alike, but are not the same, can I use localstorage without the need to comply to European law? Wait... What? Is there a law against cookies?

If you never heard of this EU cookie law, watch this (slightly biased) video:



Oh snap... so all EU website owners are screwed now? Officially yes, but in practice hardly nobody does anything with this law:



Anyhow: cookies and localstorage (and all other ways to store data on the clients computer) all fall under the same law. So converting all cookies on your website to localstorage doesn't change you from a criminal to a good citizen. You are still a very bad person when you store anything on the clients machine without asking them if they are okay with that.

To obey the law and don't make it too difficult for yourself, use a jQuery plugin like CookieCuttr to set up a accept-cookies-banner.

Conclusion: do use localstorage (or cookies, whatever you like), but don't forget the EU cookie law!

Browser support for namevalue-storage


You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

6 comments

  1. Gravatar

    test

    21 May 2014

    <script>

  2. Gravatar

    Ramasies Niblick III

    10 April 2014

    @Lindy if they are appearing without you visiting the sites then you either have a toolbar/browser extension. or... some malware.
    If you install toolbars I can't recommend enough that you uninstall them. If it's malware (and you can prove it) complain to the companies and their ISP.

  3. Gravatar

    Lindy Spears

    17 January 2014

    Help!!!! I have two local storage icons (?) that come back immediately when I delete them. Is there a way to permanently delete them? Are they tracking my activities? They are specifically gallup and a charity I donated to. Can you help me?

  4. Gravatar

    Ankush

    29 November 2013

    Great and Simple Tutorial

  5. Gravatar

    Seanguy

    08 January 2013

    This is a great article! However, would it be possible to see a "Printer Friendly" option...? Just curious...

  6. Gravatar

    Rohit Tidke

    31 October 2012

    Thanks for the article especially the note on the EU law!