Grow your CSS skills. Land your dream job.

Examples of Sites where localStorage should or is being used

Published by Chris Coyier

localStorage is a new JavaScript API in HTML5 that allows us to save data in key/value pairs in a user's browser. It's a little bit like cookies except:

  • Cookies expire and get cleared a lot, localStorage is forever (until explicitly cleared).
  • localStorage isn't sent along in HTTP Requests, you have to ask for it.
  • You can store way more data in localStorage than you can in cookies.
  • The API for localStorage is wicked simple and easy.

If you need to get more up to speed, I did a video screencast on localStorage recently. This is how it works:

/* Set some data */
localStorage.setItem("key", "value");

/* Get some data */
localStorage.getItem("key");

No libraries needed, that's just JavaScript. If you want you can use Modernizr to test for it with Modernizr.localstorage first.

OK great that's all the geeky bits, let's see some places on the web that could be, should be, or are using it. Hopefully this will spark some ideas for your own websites.

IS using localStorage


Snapbird (a powerful Twitter search tool) remembers the last person's stream you searched. It figures, chances are, the next time you come back you'll be searching that same person and this will save you a second. If not, you can just delete it and replace it. I find it useful as I'm typically trying to find old tweets of my own.


The Webbie Madness event this year had a large March Madness style voting grid where people were encouraged to come pick winners in multiple rounds. The first round had 32 people in 16 battles. The peoples names were disguised. It took a while to figure out who was who and decide who to vote for, and it wasn't something I was able to do in one "sitting". I suggested they save the votes as people did them to localStorage, that way you could come back any time and finish. Like total badasses, they did it!


JSBin (By Remy Sharp, who did Snapbird also, go figure) allows you to save your starter HTML/JavaScript template so the next time you come back to use it, you can use that same template.

SHOULD be using localStorage


Typekit has a Type Tester tool when viewing a particular font. You can type your own text into the box to see what it will look like in that font. Unfortunately when you go to another font, that custom text you entered is gone. This would be a great case for localStorage. When the value in that area changes, save it to localStorage, and load that value in when the page loads. I think that would be a great timesaver, as I think jumping around to see that text in multiple fonts is a pretty common use case.


CSS Lint has a grid of checkboxes for what features you do/don't want to CSS Lint to look for when you test your CSS. It would be really nice if this used localStorage to remember what checkbox configuration you used, so if you reload the page or come back later, it's the same. So if you don't like the "Don't use IDs" checkbox, you can turn if off forever =).


Pretty much any website with a login form could use localStorage to keep the username saved. So when a user comes back, it's one less step for them to log in.


Zeldman.com has links in the footer which allow you to toggle the colors used on the site between two versions. It saves this as a cookie which is great, but is subject to the frailty of cookies. Any site like this with alternate styling choices (e.g. font-size toggle) could save that information in localStorage and have it persist better.

MOR

This is the tip of the iceberg. I'm sure people with more developer-oriented minds can think of bigger and better ideas for this. Saving your place in a game? Caching assets? What else you got?

Way more info from Mark Pilgrim.

Comments

  1. Typo on line 5 of your code snippet.
    localStorage.setItem("key");
    (should be getItem)

    Other than that, great read, thanks.

  2. Troy Holland
    Permalink to comment#

    Thanks Chris. I discovered this recently over on Dive Into HTML5. You’ve certainly inspired me to try this out in my own projects.

  3. Is local storage accessible by the end-user? It seems like if you stored login information on a computer (that might be public) it could be access by others.

    • Completely accessible. Try visiting a website that makes use of it and type localStorage in the browser console, you’ll see everything that was saved

    • Yes LocalStorage does save the information, but you can clear the data when a session has ended with sessionStorage.clear();

    • As a golden rule, when you hear “plain text” and “login information” in the same sentence, that’s bad.

  4. Thank god for localStorage. I wanted to store a couple things client-side for my latest game/website and I was going to resort to cookies. Luckily localStorage is widely available and I ended up using it to store the game credits (remember how many coins were inserted), instructions position (to show them once), to remember what work was already discovered (to display it on the homepage on the next visit), the audio state (muted or not) and a couple more technical things.

    They’re pretty good overall, only thing is that you need to use JSON to store arrays.

  5. Will
    Permalink to comment#

    So in these examples (like the login form, or the CSS Lint checkboxes), why use localStorage over cookies?

  6. Dave
    Permalink to comment#

    Fantastic article Chris. I knew not of localStorage but it looks soooo simple I’m going to give it a try!

  7. @Federico: most browsers that support localStorage also have native JSON parsers so you can use JSON.stringify and JSON.parse easily without a library :)

  8. Scott
    Permalink to comment#

    I don’t think localStorage is at all usable for changing styles on a site. It’s only accessible by Javascript (not server-side) so you’d have to load the page in the default colour then use JS to switch.

  9. I’d like mobile Twitter clients to use local storage so that you could favourite a tweet that you want to read later if you happen to be in a place with no network coverage.

  10. This one is very simple. I am definitely gonna try it out… I heard that of while browsing HTML 5 tutorials..

  11. I developed a personal task manager using localStorage. Was a bit hefty since all data is stored as strings (data-type conversion and such). I even wrote a small library called storeIt aimed to expand some methods and make localStorage simpler (and shorter to write).

    https://github.com/brunolazzaro/storeIt

  12. Sarang
    Permalink to comment#

    great…!!! . But the only problem is synchronization with server-side script.

    • Not really, you could just create an ajax call that sends the key:value to a reciver file.

  13. Permalink to comment#

    Great examples Chris. I personally love how ColorZilla “remembers” the gradient I created. LocalStorage is great, I’m sure we will be seeing more of it on the near future.

  14. Adrian Oprea
    Permalink to comment#

    Thanks, Chris!
    As always, your site is my primary resource when it comes to learning new things ! LocalStorage is absolutely AWESOME! Thanks for the share!

    Good luck !

  15. Evandro Oliveira
    Permalink to comment#

    Grooveshark is another example of site which is already using LocalStorage.

  16. Nice Examples Chris,

    I have made a small application that stores a JSON in localStorage.

    You can add a list of clients and store info for each client, credit/debit thing + date.

    It’s not very scalable but does the job :)

    https://github.com/leonzinger/Clients-management

  17. Another way of setting and getting: associative array.

    /* Set some data */
    localStorage["key"] = “value”;

    /* Get some data */
    alert(localStorage["key"]);

  18. Andrei Hawke
    Permalink to comment#

    Does anyone know how you limit the storage on your local machine that is available to the browser and websites?

    For example: in Chrome, IE and Firefox you can limit the TEMP files size to 200MB so you know that at any given stage your browser won’t download more than that.

    Problem I see – as more and more websites begin to use local storage, machines getting filled up and users not knowing where all their spacing is going to.

    Second problem: if the user does limit the amount of storage does it work on a first in first out basis?

    • Apparently browsers store up to 5MB without bothering the user. If the website asks for more, it will ask.

  19. Some guy
    Permalink to comment#

    Username and password is saved by default in Mozilla Firefox.

  20. just when i think i know everything (well, not really) something new comes out, can we have some time to catch up please, sheesh…. ;)

  21. This site (www.alisonshurville.co.uk) uses the same technique to remember which layout mode has been selected for the thumbnails.

  22. Permalink to comment#

    Check out: http://facturarapida.net, the saving feature is all based in localStorage.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".