Quick Tip: Learning About HTML5 Local Storage
Tutorial Details
- Technology: HTML5
- Length: 4 Minutes
- Topic: Local Storage
In today’s video quick tip, we’re going to build a working, though very basic, to-do list in just a minute or two. Thanks to HTML5′s local storage, we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.
Subscribe to our YouTube page to watch all of the video tutorials!
Or, watch this video on Screenr.com.
“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”
-QuirksBlog
While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Wow. That is so cool! Thanks :).
Agreed this is a very nice win in my book.
Wow! Sweetness! I knew HTML5 had huge benefits and improvements, but I never thought it would do that!
Thanks as always, Jeff! You do a fantastic job!
I get a “Security Error” in the demo in the latest Firefox. Doesn’t work.
I didn’t knew about this.. sweet! :)
Would be useful to remember data in forms when accidently closing the page, like wordpress does for example.
Thanks!
You can find a list of browsers that support the Local Storage feature here…
http://www.findmebyip.com/litmus/
Thanks Elijah – that’s a useful site (and pretty too!)
Nice – how long does it stay “in storage” for? Is Javascript the only way to target localStorage?
To my understanding it stays until a user tells it to delete the database either through the application or manually through the browser settings or filesystem.
It should stay until you clear you cache.
I wrote a similar article for a website. The difference is instead of using LocalStorage() I used a actual local database using window.openDatabase(). There are pros and cons of both mine and yours methods but they are both good. :)
You can read it here:
http://www.tuttoaster.com/building-a-to-do-list-with-local-storage/
This is great but wouldn’t it be more efficient to store the list with an onunload event? that way it is still always saved but not every time the user edits it.
Oh sure – the script can definitely be improved. This was more of a “how to do it in a minute or two” example. :) I’m actually working on a HTML5 mini-book for Rockable that will take this much, much further.
Offtopic: Jeff, is it possible that you would write a tutorial about wordpress theme designing using html5 and at the same time using the Dreamweaver CS5 features on your future release tutorials?
Also with your jQuery skills applied would be much more exciting! I know it sounds like rockable but I think you got the skills to make it possible. Just a thought.
That’s amazing! I’m eager to see what developers do with this. Thanks Jeff.
Here is another website that lists features of different browsers…
The contenteditable attribute actually has a huge support even on IE6 :)
Web Storage is basically IE 8/9, FF 3+, Safari 4+, Chrome 3+, & Opera 10.5+
http://a.deveria.com/caniuse/#agents=All&eras=All&cats=All&alts=p&statuses=All
[...] we can make the *brower* “remember”… mistyping guys.
Funny that you posted this, as I was building something with localStorage this morning.
@Elijah, your first link doesn’t include Linux :( (note: localStorage works on Ubuntu Chrome 5.0.342.7 beta)
Definitely an exciting part of the HTML5 spec. It’ll be exciting to see how people will run with it.
My question, Html 5 is “future” but I guess how many time is gonna take to accomplish that everybody has access to it. I mean just a few year ago I think 1 o 2 IExplorer 5 was out of the market literal, so IExplorer was invented in 1999 take almost 10 year the forget about it. IE 6 is still on the market and this Explorer in particular will last at least another 5 year (note: is the major browser in offices.) So What is the real market for the HTML 5 in the short term? the iphone hahaha?? o just chrome, safari and firefox?? or the chrome frame is gonnar resolve the IExplorer problem?? http://code.google.com/chrome/chromeframe/ I have to many questions :P
ohh…i see…so you wanna fight in the comments….ok..we can bang. Whats up…wanna do something about it?
GET IN MY GUARD!.
:)
Uuuuh Ohhhh…. May I ask why people don’t like chokolatecookies anymore? :S
Short and sweet! Thanks Jeffrey :)
Once again you are with a great video on HTML. I found your profile on internet and wrote a post about it . I want to share that with you and others here.
http://xpressabhi.com/nettuts-on-youtube-with-web-design-and-development-video-tutorial/
I hope you will appreciate it.
What’s so special about local storage?
Doesn’t it the same like good old cookies?
This becomes quite useful in mobile development. When some initially open your page or has a flaky Internet connection this is a great way to store stale data on there device. There are plenty of other uses but that’s the first that comes to mind for me.
It’s also more efficient than using cookies.
Great tip! :)
whats the difference between this and cache manifest?
A cache manifest file tells your browser what files to cache so you can view them locally unconnected to the internet (offline web applications). The LocalStorage() function allows you to store entries into a virtual entry that your computer will store so you can view it later.
Hope that clears it up. :)
so does gmail mobile use this method to cache the messages you have, and then cache manifest to cache the actual mobile application? Im trying to replicate this technique(gmail mobile) for a project im working on.
If you look at Settings->Safari->Databases on your iPhone for example, I see a database for Gmail. I’m guessing that once that connect to the sever they then put it into the local database so you can review it later without being connected to the internet.
Even if they didn’t do it like that, thats a method you can take to get a similar effect.
This is awesome, I could see this being used as a way to track the status of an application.
“Fight in the Comments”
Quoted for truth!
While awesome, unless we decide to drop IE6 support, this is just something to dream about.
Drop ie6 support. Or atleast don’t be afraid to use features of new browsers. Maybe you could get away with adding in new features that rely on modern browser and do some sort of JavaScript browser detection to give the ie6 folks a message to upgrade. Or stick with things like rounded corners that degrade gracefully.
I just get frustrated with this whole “I can’t use this yet because ie6″ issue. It will be an issue for much longer if we don’t give them a nudge towards the future.
IE6 is a burden and a frustration that I’d love to get rid of, but if I’m going to code a work-around (like using cookies), then I might as well just have the whole site use that work-around. I’m not Google, or some big shot that can just say FU to IE6, and that’s sort of what I’d feel I’d be doing by telling somebody to upgrade. Let’s face it, if somebody can’t upgrade, then they just can’t. It may be an IT department holding them back, or maybe they are just stupid. I don’t really care about the stupid group, but there’s still some normal users out there that are forced to use IE6 at work. Heck, we even have a computer at work that isn’t allowed to be upgraded for fear of messing up mission critical programs… it could happen to anyone. I think there has to be a point when we kill IE6, throw it in the trunk, and drive it out into the desert. I just don’t want to be the one.
I’m with Furley. And I don’t think you need to be a big shot Google like company to make the step towards change. Its gotta start someplace and from the ground up sounds good enough to me.
And the argument of some users aren’t allowed to upgrade within their office is getting old too. Then let them consistently come across errors that are telling them they are using an out of date browser and eventually they’ll be passing that complaint onto their IT guys.
This is a discussion for another place but I feel that simple but effective tools like this shouldn’t be placed on the shelf because we’re waiting for the dinosaur to die. It won’t happen anytime soon unless we help it along.
Its perfect for a To do list.
Well was expected that it doesn’t fuction on IE.
It should work in IE8 though!
It is useful when the browser can remember the history especially when we have a long list.
Hello, this is a really nice tutorial but it doesn’t seem to work in my computer, my ff is up to date,
I just put the script in the same html file, that’s all.
What is the problem?
(I tried to copy your code,but no success)…
Are you trying on your local server? You might run into some problems there potentially. Try uploading the page to your host, and try again. Let us know if that fixed it. :)
Just curious, why doesn’t this work on my local server??
Hey Jeff, great example. Thanks for posting the compatibility, very useful. Actually its pretty surprising just how many browsers support this option.
I really like the contenteditable list example. I was aware you could use this for divs but didn’t know it worked so well for lists. I could see this as a great way to edit items and then when a user is ready they could click save and have this go to an sql db.
Nice work.
- Alex
Great vid Jeff. Is there a reason you did the whole “getElementById” thing instead of just typing $(‘#edit’)…. instead? Wondering if i’m missing something I should know haha??
I think he just did it because it is easier. He could have also done. var edit = $(‘#edit’);.
I have learned that http://jsbin.com/ is very cool and html5 and the local storage, too. thx for the short video.
Sweet! Can’t wait to see how this works with Titanium!
Seems like this is a global topic, have seen multiple threads about this feature.
Is it something with my browser that I don’t have enabled. This function seems to work for everyone, but not for me.
What’s wrong? :-P
Found it! I’d just have to “clear” the storage by localStorage.clear();
“Add some items, and refresh the page. It’ll remember what you typed.”
No it won’t, not in FF 3.6.3 or Safari 4.0.4, anyway.
So cool! Thank you very much, Jeff!
thanks Jeff, nice to know that
Hello
Just a little comment I tried to use this with a local HTML file and it didn’t work. You can not use it with local files the page has to be in a domain. If you put it in a local server like Apache or Tomcat and visit the page through an address like http://localhost/localstorage.html it will work just fine.
So for everyone out there trying to do the tutorial on a local file you will need at least an http server on your computer or you’ll have to upload the page to a web hosting.
By the way, nice tutorial, really amazing.
Yay even more data validation to do for us programmers. We already can’t trust what they put in there in the first place but now we have to validate it onload now too. It sounds really cool and will have its uses but I’m just not sure about how many uses it will have once it comes to applications and the like.
I really like it tho.
What is the difference with Cookies?
The exact same example could use cookies instead, so what is the difference?
Cannot get this to work on any recent browser (Opera 10.5, Chrome, Safari, FF, IE). I am using Windows Vista64 – could that be an issue? I have tried the demo and uploading to a web host server – no luck with either. Have also tried adjusting cache settings and disabling Norton firewall. Is there a way I can find out if I actually do have localStorage capability?
Can you use this method for table cells? I’m wondering if it would be possible to build a large editable spreadsheet like table with HTML 5.
Yeah, this should be possible by just applying a contenteditable attribute to any field that accepts text.
That seems to work, but tables do not seem to have the additional feature that HTML5 list elements have in that you can add more items to the list from the rendered page. I suppose that would have been quite a complex feature for tables. But maybe I’m missing something?
Hi Jonathon,
Did you apply the attribute to the or the ? If you think of the list elements, you apply it to the and not the , so perhaps applying it to the will allow you to do that.
Would you suggest that this is better than using cookies/sessions?
Are there any known vulnerabilities with this?
I’m wondering whether or not using localstorage could be used as authentication for a usersystem perhaps? As long as the “session” cannot be hijacked… surely this’d make it more secure than using cookie-based login systems?
Hi Jeff,
Very informative for the one like me who wants to stick to browser for most of the web application’s trivial tasks.
Thanks a lot.
Thank you for this article.
I have yet to find an example of localStorage that actually works on ie8 – thats up to date ie8 running as ie8, on windows vista, 32bit.
I understand some other html5 storage examples wont work because ie8 does not support addEventListener. The example here doesn’t use addEventListener in the code, yet I cant get it to work for me either.
Everywhere I search on the web I’m told ie8 supports local storage..wondering if it actually does! ?
Wow, that was cool. Up until the part it crashed my browser (Safari 4) and didn’t actually retain my ‘to do list’.
This is really cool! Thanks for sharing this, it should come in handy.
Here’s my demo of html5 localstorage: http://jsfiddle.net/Kpd8m/
It shows that there’s different ways to achieve the same thing…
What did you use to edit that code in chrome?
With havin so much content and articles do you ever run into any issues of plagorism or copyright violation? My site has a lot of completely unique content I’ve either created myself or outsourced but it appears a lot of it is popping it up all over the internet without my permission. Do you know any solutions to help reduce content from being stolen? I’d certainly appreciate it.
Thanks great intro! I had some problems inserting into a wordpress post because it kept inserting tags. Fixed it by adding this to header.php