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.
Links from video:
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 !
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.
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
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.
hii sir i have a dought,how to develop registration page store data and update data and send data in server.
Chris,
Is data also saved when a browser is accidentally closed or crashes? Or does it only work while the browser is running?
Chris, any chance you’ll build this as a plugin for WordPress comment forms? :)
Pretty unlikely, although I like the idea of course.
Number of WP plugins I’ve built: 0
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.
Just noticed when you ran “if (localstorage)” you didn’t have the alert(“yep!”) in your code anymore. Probably why it didn’t work :)
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.
Yeah I also noticed that. Stupid radio buttons…
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!
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
Security tips:
1) If you use a timed or input blur/focus method, make it optional. Wouldn’t want to enable on a computer in a library for example.
2) Never store sensitive data like SSN, credit card numbers, etc.
3) Clear the local storage when the form is submitted.
4) For added security allow the user to enter in a passphrase that will obfuscate/decrypt the local storage data.
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.
Local storage is sooo cool. Love your post!
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?
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.
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?
thnx chris
Hey Chris. Great stuff. And yes you can check if localStorage exists without modernizer. Here it is;
if(typeof localStorage == ‘object’) alert(‘yap!’);
Sweet.
If you look at line 694 of Modernizr — https://github.com/Modernizr/Modernizr/blob/master/modernizr.js Looks like there is some extra stuff it’s doing for Firefox, but might be edge cases, not sure.
Just wanted to say I appreciate your teaching style, very laid back.
Thank you.
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
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
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 !!
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
Excellent tutorial, this really helped me with an assignment i’m working on.
Cheers.
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
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?!
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
Thank You.
@rad1964 Thanks a lot.
Great work! Really appreciate the video and your great website.
Is it possible to apply this over multiple forms?
// serializeArray is awesome and powerful
and if so, how would it be possible?var data = $("#form54").serializeArray();
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
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!
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
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.
I just wanted to say thank you for a great tut Chris! I will use this approach for my animal sightings log. I wonder, can you tell me how I could go about letting users save more than one set of form data? The idea being that if a user gets a sighting of a badger and saves the data, they may want to add another sighting of another creature. How could I save the data to localStorage from multiple sets of form data? Hope this makes sense. Thanks again!!