- 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");
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!
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.
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?
Typo on line 5 of your code snippet.
(should be getItem)
Other than that, great read, thanks.
Thanks Kyle! (burying cause it doesn’t matter anymore)
Thanks Chris. I discovered this recently over on Dive Into HTML5. You’ve certainly inspired me to try this out in my own projects.
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.
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.
So in these examples (like the login form, or the CSS Lint checkboxes), why use localStorage over cookies?
I was thinking the same thing about the login example.
Fantastic article Chris. I knew not of localStorage but it looks soooo simple I’m going to give it a try!
@Federico: most browsers that support localStorage also have native JSON parsers so you can use JSON.stringify and JSON.parse easily without a library :)
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.
This one is very simple. I am definitely gonna try it out… I heard that of while browsing HTML 5 tutorials..
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).
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.
Some more examples:
Contact or comment forms, like this one, could use
localStorage(instead of cookies) to store the entered user data locally. I do it on my site and on jsPerf.
http://mothereffingcssescapes.com/ and http://mothereffingunquotedattributes.com/ both use
localStorageto persist the user input, even if you refresh the page or accidentally close it.
Awesome. If more people want to know about using it related to forms, check out the link at the top of the article that goes to the screencast, where the whole thing is about using it on forms.
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.
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 !
Grooveshark is another example of site which is already using LocalStorage.
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 :)
Another way of setting and getting: associative array.
/* Set some data */
localStorage[“key”] = “value”;
/* Get some data */
Thanks! I find this an easier way to set ‘nd get!
No problem :)
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.
Username and password is saved by default in Mozilla Firefox.
just when i think i know everything (well, not really) something new comes out, can we have some time to catch up please, sheesh…. ;)
This site (www.alisonshurville.co.uk) uses the same technique to remember which layout mode has been selected for the thumbnails.
Check out: http://facturarapida.net, the saving feature is all based in localStorage.