The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    • Chris Coyier
      Permalink to comment#

      Just for the record, the link from the video I briefly showed:

      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.

    • syed taqi

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

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


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

  4. 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. Joost de Valk
    Permalink to comment#

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

    • Chris Coyier
      Permalink to comment#

      Pretty unlikely, although I like the idea of course.

      Number of WP plugins I’ve built: 0

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

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

    • Simon Davies
      Permalink to comment#

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

  7. 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. 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. 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. 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. Richard
    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. Bratu Sebastian
    Permalink to comment#

    Local storage is sooo cool. Love your post!

  13. Adam

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

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

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

    thnx chris

  17. Mike
    Permalink to comment#

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

    Thank you.

  18. lalit
    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. 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. 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. 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. Jon
    Permalink to comment#

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

  23. kajal
    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. rad1964
    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. rad1964
    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. Saroz, Nepal
    Permalink to comment#

    Thank You.
    @rad1964 Thanks a lot.

  27. Phil
    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. 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. Phil
    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.


    • Jason
      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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed