Quick Tip: Learning About HTML5 Local Storage
videos

Quick Tip: Learning About HTML5 Local Storage

on Apr 9th 2010 with 75 comments
Tutorial Details
  • Technology: HTML5
  • Length: 4 Minutes
  • Topic: Local Storage
Download Source Files
Demo View It Online
This entry is part 6 of 14 in the HTML5 and You Session
« PreviousNext »

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.

Support matrix

via http://www.findmebyip.com/litmus/

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • Knettertje

    Wow. That is so cool! Thanks :).

    • http://mediagearhead.com Giles

      Agreed this is a very nice win in my book.

  • http://matt-bridges.com Matt Bridges

    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!

  • Shaun

    I get a “Security Error” in the demo in the latest Firefox. Doesn’t work.

  • Larry

    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!

  • http://elijahmanor.com Elijah Manor

    You can find a list of browsers that support the Local Storage feature here…

    http://www.findmebyip.com/litmus/

    • http://www.freshclickmedia.com Shane

      Thanks Elijah – that’s a useful site (and pretty too!)

  • Alvin

    Nice – how long does it stay “in storage” for? Is Javascript the only way to target localStorage?

    • Cody Robertson

      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.

    • cyn

      It should stay until you clear you cache.

  • Cody Robertson

    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/

  • adrian

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      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.

      • http://www.seowisedesigns.com Yheng

        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.

  • http://themeforest.net/user/themolitor/follow THE MOLITOR

    That’s amazing! I’m eager to see what developers do with this. Thanks Jeff.

  • http://elijahmanor.com Elijah Manor

    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

  • JayDesign

    [...] we can make the *brower* “remember”… mistyping guys.

  • http://davidwparker.com David Parker

    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)

  • http://stevegrunwell.com Steve Grunwell

    Definitely an exciting part of the HTML5 spec. It’ll be exciting to see how people will run with it.

  • Nahum

    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

  • Bill

    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!.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      :)

  • http://www.hsp.dk Henrik Pedersen

    Uuuuh Ohhhh…. May I ask why people don’t like chokolatecookies anymore? :S

  • Ramin

    Short and sweet! Thanks Jeffrey :)

  • http://xpressabhi.com abhishek

    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.

  • Al

    What’s so special about local storage?
    Doesn’t it the same like good old cookies?

    • http://Twitter.com/furley Furley

      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.

  • http://www.philohermans.com Philo

    Great tip! :)

  • http://mamjed.com mamjed

    whats the difference between this and cache manifest?

    • Cody Robertson

      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. :)

      • http://mamjed.com mamjed

        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.

      • Cody Robertson

        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.

  • Alvin Crespo

    This is awesome, I could see this being used as a way to track the status of an application.

  • Matt

    “Fight in the Comments”

    Quoted for truth!

  • http://brianswebdesign.com Brian Temecula

    While awesome, unless we decide to drop IE6 support, this is just something to dream about.

    • http://Twitter.com/furley Furley

      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.

      • http://brianswebdesign.com Brian Temecula

        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.

      • Myke

        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.

  • http://virkings.es.tl/ VirKings

    Its perfect for a To do list.

    Well was expected that it doesn’t fuction on IE.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It should work in IE8 though!

  • http://www.charmainelimblog.com Charmaine

    It is useful when the browser can remember the history especially when we have a long list.

  • Agam

    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)…

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      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. :)

      • Mike

        Just curious, why doesn’t this work on my local server??

  • http://todotweet.com alexander Wolfe

    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

  • Mark Osborne

    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??

    • Cody Robertson

      I think he just did it because it is easier. He could have also done. var edit = $(‘#edit’);.

  • http://www.schrumpfschlaeuche.org Schrumpfschläuche

    I have learned that http://jsbin.com/ is very cool and html5 and the local storage, too. thx for the short video.

  • http://jackbliss.co.uk Jack Bliss

    Sweet! Can’t wait to see how this works with Titanium!

  • http://www.jordanwalker.net Jordan Walker

    Seems like this is a global topic, have seen multiple threads about this feature.

  • http://johnie.se Johnie Webdesign

    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

    • http://johnie.se Johnie Webdesign

      Found it! I’d just have to “clear” the storage by localStorage.clear();

  • http://efsfds.com FretzelFrex

    “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.

  • LiangqinSun

    So cool! Thank you very much, Jeff!

  • jmarreros

    thanks Jeff, nice to know that

  • http://sergiobobillier.blogspot.com Sergio Bobillier

    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.

  • Jeff

    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.

  • Port

    What is the difference with Cookies?
    The exact same example could use cookies instead, so what is the difference?

  • Rick

    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?

  • Jonathan Clarke

    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.

    • James

      Yeah, this should be possible by just applying a contenteditable attribute to any field that accepts text.

      • Jonathan Clarke

        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?

      • James

        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.

  • James

    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?

  • http://binufestin.tumblr.com/ Binu

    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.

  • Nicky

    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! ?

  • Jay

    Wow, that was cool. Up until the part it crashed my browser (Safari 4) and didn’t actually retain my ‘to do list’.

  • http://www.brettwidmann.com Brett Widmann

    This is really cool! Thanks for sharing this, it should come in handy.

  • http://www.hm2k.com/ hm2k

    Here’s my demo of html5 localstorage: http://jsfiddle.net/Kpd8m/

    It shows that there’s different ways to achieve the same thing…

  • http://20tap.com Sebastian

    What did you use to edit that code in chrome?

  • http://www.escort4vip.com escort padova

    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.

  • http://www.enchantcrm.com/blog Dan

    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

Newer Comments →