#96: localStorage for Forms

HTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing the key, you can retrieve it at any time. This can be used with "progressive enhancement" in mind, doing things to enhance experiences but not be required. In this screencast we'll look at how to save the data on a form (before submission) so in case the browser window closed or the computer crashed or something, the data would not be lost.

View Demo   Download Files

Links from video:


  1. User Avatar
    Rikudo Sennin
    Permalink to comment#

    Awesome! but aside of the fact that it doesn’t get sent to the server and it doesn’t expire, I still don’t see much difference between that and cookies.

    Awesome nonetheless and I will definitely use it.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Just for the record, the link from the video I briefly showed: http://blog.andyhume.net/localstorage-is-not-cookies

      Here are the pertinent facts:

      1) Cookies are small (4KB), localStorage is big (5MB+requests for larger)
      2) Cookies are sent in HTTP Requests, localStorage is not
      3) JavaScript API for localStorage is nice and easy, for Cookies it is not
      4) Cookies expire, localStorage does not
      5) The localStorage concept is key/value pairs, a bit different than the Cookie model.

    • User Avatar
      syed taqi

      wow, that very cool. I liked your way and thanks for sharing your good experience !

  2. User Avatar
    Bill Smithem
    Permalink to comment#

    First, nice example. I love this stuff.

    You didn’t see much happen when you changed Modernizr.localstorage to localstorage because you also deleted the alert. :)

    Also noticed at the end that the radio buttons did not get saved. I haven’t had a chance to play with it yet and figure out why.

  3. User Avatar
    Michael Warren
    Permalink to comment#

    just some noob questions, but it seems like localstorage could be used in place of GET and POST requests across pages and sessions.

    how would say, a php DB insertion script handle access to localstorage? Or, would I just use Jquery instead of php to handle that kind of thing?

    Also, is the localstorage editable/corruptable by the user, or can they just see what the data contains and delete?


    • User Avatar
      Nick Chamberlin
      Permalink to comment#

      Yes, Local Storage is editable by the user, you can go in and change the values using the Inspector in Google Chrome.

      There’s some Jquery plugins I’ve seen that will use cookies if Local Storage is not available, though obviously this wouldn’t work everywhere. JS makes it pretty simple to play with Local Storage and values.

    • User Avatar
      Permalink to comment#

      hii sir i have a dought,how to develop registration page store data and update data and send data in server.

  4. User Avatar
    Chantal Coolsma
    Permalink to comment#


    Is data also saved when a browser is accidentally closed or crashes? Or does it only work while the browser is running?

  5. User Avatar
    Joost de Valk
    Permalink to comment#

    Chris, any chance you’ll build this as a plugin for WordPress comment forms? :)

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Pretty unlikely, although I like the idea of course.

      Number of WP plugins I’ve built: 0

  6. User Avatar
    Simon Davies
    Permalink to comment#

    Hi Chris,

    Great Screencast, the only thing I was wondering is would you append the name attributes with a site/app identifier to prevent the data conflicting with other sites. Or is localStorage restricted per domain?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Data is isolated per-domain, so there won’t be conflicts unless you think you might conflict with yourself. If you think that’s a possibility, use some kind of prefixing strategy on your keys.

    • User Avatar
      Simon Davies
      Permalink to comment#

      Brilliant, thanks Chris. I’ve got some nice ideas about implementing this in a future project.

  7. User Avatar
    Michael Sargeant
    Permalink to comment#

    Just noticed when you ran “if (localstorage)” you didn’t have the alert(“yep!”) in your code anymore. Probably why it didn’t work :)

  8. User Avatar
    Jason McLaughlin
    Permalink to comment#

    Great screencast!

    I found a quirk in your example when it comes to radio buttons (“Willing to relocate”). By default, the button labeled “Yes” is checked. If you click “No”, save the data, then refresh, the button labeled “Yes” is still checked… but if you inspect the element, localStorage has changed its value to “No” even though it still has a label of “Yes”. So in practical applications, you probably need a bit more code to handle radio buttons.

  9. User Avatar
    Ara Garabedian
    Permalink to comment#

    Be careful when using localStorage in your web forms! localStorage presents a new problem now and can get around the fact that users may have cookies turned off.

    Consider this before you jump into building functionality for forms which utilize this technique for potential security red flags!

  10. User Avatar
    glen jensen
    Permalink to comment#

    I subscribed to your podcast on the Apple iTunes Store for css-tricks screencasts. When trying to download any of the podcasts (#87-94) the ones showing as available – I get an error message that the files cannot be found.

    In going to your web page, there are even more episodes available. It would be nice if the itunes could get those also.

    I clicked on the Download the high quality m4v files and … where did it go?

    I should point out that I am using a 6 year old Windows XP system. ;-)

    Any thoughts?

    Thanks for your time.


  11. User Avatar
    Permalink to comment#

    Cant get your video playing in Opera Chris. Latest version on Mac. Seems to default to the Flash version but it still won’t play.

    Just thought you might like to know.

  12. User Avatar
    Bratu Sebastian
    Permalink to comment#

    Local storage is sooo cool. Love your post!

  13. User Avatar

    Thanks for the screencast, very nice!

    I think you could have avoided the whole preventDefault return false stuff if you used input type=”button” for the Save button.

    How secure is localStorage? Could I store a password in it?

  14. User Avatar

    Thanks for the nice episode. I also liked the troubleshooting part.. ;-)
    By the way, is there a way to save data automatically as soon as some input has changed? This could be quite useful on select menus or drop-down boxes I guess.

  15. User Avatar

    I’m guessing that for sensitive information like credit card numbers, you can prevent storage. How would you prevent certain vaules from being stored in the loop?

    Great screencast. When is “Digging into HTML5” coming out?

  16. User Avatar

    thnx chris

  17. User Avatar
    Permalink to comment#

    Just wanted to say I appreciate your teaching style, very laid back.

    Thank you.

  18. User Avatar
    Permalink to comment#

    Great stuff and wonderful screencast. i saw all your videos. it really helpful for new developer and in this video it could be quite useful on select menus or drop-down boxes.

  19. User Avatar
    Tanner Nelson
    Permalink to comment#

    I love this tutorial. :) I used it on a website I am making for a tech fair. It is for story submissions and it would suck so bad if you lost a huge story that was mid typed because of a browser crash or something.



  20. User Avatar
    Steven Gardber
    Permalink to comment#

    Love the screencast Chris.

    I have been trying to implement this in my Jquery Mobile design but I’m struggling to get the text inputs to display the data on reload using FF & safari. IE seems fine and all select items display as expected.
    Checked the console and all the information is stored in localStorage.

    Weird !!

  21. User Avatar
    Rajesh Jain
    Permalink to comment#


    This is exactly what I was looking for. Thank you for the great screencast, I also got introduced to the Wufoo website and typekit.


  22. User Avatar
    Permalink to comment#

    Excellent tutorial, this really helped me with an assignment i’m working on.

  23. User Avatar
    Permalink to comment#

    Hey , very nice tutorial. I am doing a project where it has the same requirement .But the thing is that form have multiple select boxes and all are populated dynamically and when I tried to implement your solution over here I found dynamically populated form values are not getting stored by form serialize method. Can you please suggest me any solution

  24. User Avatar
    Permalink to comment#

    I am having problems with check boxes, when I return the the form I see text fields have saved data (and the saved data message) but none of the check boxes are saved. I copied your 2 check boxes from your form and they wouldn’t save the yes or no. So I tried the demo form and again the check boxes did not save, am I missing something? I have 3 groups of check boxes, one has 25 boxes one has 9 the other 2, if it matters.

    Also, since this will only save on localstorage, the submit button would be useless is there a way to make it disapear or do I need to make it into some sort of email admin button?!

  25. User Avatar
    Permalink to comment#

    I did find someones script that works alone with check boxes, I tested and it does indeed retain the check boxes.

    I then tried to add it separately into the my doc, to no avail, then I tried to combine it with your code. FAIL.

    I thought if I included the code here, you can let us know if it would work combined with the script here! And if so, how to implement it.

    // Check Boxes
    .delegate(‘:checkbox’,’change’,function() {
    var $this = $(this);
    localStorage.setItem(‘checkbox’ + $this.index(‘form :checkbox’),$this.attr(‘checked’).toString());
    .each(function(index) {
    if(localStorage.getItem(‘checkbox’ + index) === ‘true’) $(this).attr(‘checked’,true);

    Appreciate your time Chris!


  26. User Avatar
    Saroz, Nepal
    Permalink to comment#

    Thank You.
    @rad1964 Thanks a lot.

  27. User Avatar
    Permalink to comment#

    Great work! Really appreciate the video and your great website.

    Is it possible to apply this over multiple forms?
    // serializeArray is awesome and powerful
    var data = $("#form54").serializeArray();
    and if so, how would it be possible?

    Secondly, if I dont use jquery to insert my buttons and instead hard code them will the script still accept them if their IDs are the same?

    Finally, do you have an example of the “onblur” save function?




  28. User Avatar
    Shawn Rice
    Permalink to comment#

    Once again, Coyier turns a seemingly obtuse topic into a few lines of very understandable code. And yes, witnessing you troubleshoot is some of the most educational moments of the video. Thanks!

  29. User Avatar
    Permalink to comment#

    The issue with radio buttons and check boxes is because localStorage stores their values but HTML expresses their state using checked, checked=”checked” or checked=”true”.

    So for example if you have value=”1″ then when you check this the value, 1, will be saved. When you use the code provided by Chris the value 1 will be retrieved but this does not set the state back to checked. What we need, and my Javascript isn’t good enough to do this is to use Jquery to add back “checked” if the value is stored as 1 or whatever.

    That is the answer I just don’t know how to write the code to do it.


    • User Avatar
      Permalink to comment#

      I’ve been troubleshooting an issue with setting and getting radio buttons to and from localStorage. I’ve posted my solution on a related stackoverflow question, and thought I’d share it here as well. It could have missed something, so please leave comments.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.