Grow your CSS skills. Land your dream job.

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

Download Video File

Comments

  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.

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

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

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

    ~M

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

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

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

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

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

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

    Glen

  11. 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. Local storage is sooo cool. Love your post!

  13. 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. thnx chris

  17. Mike
    Permalink to comment#

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

    Thank you.

  18. 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.
    thanks

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

    Thanks!

    Tannernelson.com/ss/stories/#submit

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

    Chris

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

    Thanks
    Rajesh

  22. Jon
    Permalink to comment#

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

  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. 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. 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
    $(‘#form54′)
    .delegate(‘:checkbox’,’change’,function() {
    var $this = $(this);
    localStorage.setItem(‘checkbox’ + $this.index(‘form :checkbox’),$this.attr(‘checked’).toString());
    })
    .find(‘:checkbox’)
    .each(function(index) {
    if(localStorage.getItem(‘checkbox’ + index) === ‘true’) $(this).attr(‘checked’,true);
    });

    Thanks,
    Appreciate your time Chris!

    rad1964

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

    Thanks!

    Regards,

    Phil

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

    Phil

    • 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

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".