Thomas Hardy

Using HTML5 localStorage on a form

Update – 24th April 2012

Based on the great comments recieved, the demo and download files have been updated to work using .change so it works with fields which are filled via auto fill or content pasted in.

HTML5 localStorage provides us with the ability to store named key/value pairs locally within a users browser, this means that the data stored in localStorage is still there even after a user has closed the browser, deleted their cookies or turned off their machine/device.

The HTML5 localStorage attribute is supported by most modern browsers including Firefox 3.5+, Chrome 4+, Safari 4+, Mobile Safari, Android 2+ and Internet Explorer 8+.

Now lets dive into some code and create a basic working example. In this example we are going to create a simple form which stores the data entered into the form so that if the form isn’t submitted but the browser is closed the data is still store and then retrieved when the user returns to the form.

So first we need a form for the user to fill in, here is the HTML for that:

<form id="localStorageTest" method="post" action="">
    <input type="text" name="name" id="name" class="stored" value="" />

    <input type="email" name="email" id="email" class="stored" value="" />

    <textarea name="message" id="message" class="stored"></textarea>

    <input type="submit" class="demo-button" value="Submit" />

The main things to notice on this form is that the form elements have been given a class of stored, this will be used to allow us to specify which fields to store as you may not want to store all the data a user inputted.

Next up is the jQuery:

<script type="text/javascript">
$(document).ready(function () {
    function init() {
        if (localStorage["name"]) {
        if (localStorage["email"]) {
        if (localStorage["message"]) {

$('.stored').keyup(function () {
    localStorage[$(this).attr('name')] = $(this).val();

$('#localStorageTest').submit(function() {

OK so lets explain what is happening above, a function called init is ran when the page is first loaded. This function checks if any data is stored for each field and if so adds the data to the relevant form element.

Next we have the keyup function which runs when a user presses a key in any form element with the class of stored. This function then adds the inputted data into the localStorage.

Finally we come to submit function which when runs a user submits. This function then removes all of the data from localStorage.

View Demo Download Demo


  1. ido

    Very nice. I wrote some code for a similar purpose a few days ago and I think init() can be made more flexible this way:

    var input_name = ”;
    init() {
    $.each( $(‘form input’), function() {
    input_name = $(this).attr(‘name’);
    if (localStorage[input_name]) {

    This way you can have as many input fields you’d like (as long as each has a unique name attribute). What do you think?

  2. Thomas Hardy

    @ido looks like it should work fine. If I get a chance I will implement it and update the example.

  3. ivascu

    it doesn’t work with autofill :P

  4. Steffen

    @ivascu is right – I can’t make it work with autofill either. Other than that, great work!

  5. Greg Babula

    Great post, nice to see an easy implementation

  6. Chip Cullen

    Just a thought on the auto-fill issue (saw that as well) instead of using the keyup event handler, why not ‘change’? I’m not sure – it may capture data put in by auto fill.

  7. Bryan

    If you move the .keyup code into a function and call that function in .keyup as well as .blur, it should work with autofill.

  8. Taai

    I don’t know about you, but on my Crome browser the autocomplete works just fine. Or with “autofill” you mean something else?

  9. Peter

    Very nice example! Looks very easy :-)

  10. Taai

    Ok, got it! Try to write something and select one text from autocomplete and then refresh the page – only written text will appear. So, solution would be to add extra “focusout” event. Cheers! :)

  11. Clinton Gallagher @virtualCableTV

    Apparently, the Kindle Fire browser Silk also supports localStorage

  12. Klaatu

    Also look at this article from the Opera browser people for more details on the evolving web storage standard.
    Web Storage: easier, more powerful client-side data storage

  13. Klaus

    Unfortunately Safari on iOS-devices has a function to delete cookies and data, and it deletes the stored data too. So you can’t delete cookies without deleting stored data …

  14. Demircan Celebi

    Thanks a lot! Like other people mentioned in the comments, I have used .change() instead of .keyup().

  15. Thomas Hardy

    Thanks a lot everyone, the demo and download will be updated to use .change() in the next few days.

    Will also be looking at changing the init function so it just picks up any input in a form.

  16. Peter Frick

    Please be aware that you’ll delete ALL stored data by calling localStorage.clear(). In my opinion it would be a good practise to clear only the fields you created.

    Also think about the naming of your keys: Fields like ‘email’ and ‘name’ are very common and could lead to confusing results. I’d suggest a prefix like ‘th-email’ or something that identifies your site. A prefix would also make it much easier to handle and clear your data.

  17. Eliza

    Thank you for your code. However, I need to be able to send the data from the form to a new page.

    I would appreciate your help with this please.

  18. Al Kirby

    Any chance someone could help implement this with Contact Form 7 WordPress plugin? I’ve added “class:stored” and “id:whatevers” to all the Contact Form 7 inputs, etc, and I also included the JS within the page.php file using the “id” of the Contact Form 7 form. Strange thing is the “id” isn’t appearing when I view source.

    thanks in advance

  19. Mike

    Any chance you can update this so the init function picks up any input in a form? I am trying to accomplish this and runnign into issues. The form I am using has many fields and the code would be tedious to list each field individually.


  20. Braj


    Great work man!

    Can you tell me one more thing. How can be traced if an image file already stored into localStorage? if there are some changes on size of the files, etc. so we can rectify that image.

    It can help us on speed up downloading the webpage once it loads.


  21. Joe

    this is great but when you click the button how do you transfer it into another page showing the details entered?

  22. Bendix

    Hi Thomas,

    thank you for sharing this.

    I took the code from ido above and enhanced a little bit as a self invoking function for faster initialization:

    (function() {
    $.each($(‘input,textarea’), function() {
    if(localStorage[$(this).attr('name')]) {

    Works fine for me. Perhaps you want to update your exampe. You also forgot to update your example with .change() in the text.

  23. Pedro Salles

    Hi! How can I get this working for storage checkbox infos? Thanks!

  24. Jose Marcos


    Great autocomplete wrapper for filling forms!

    take care!

  25. Celso Jr

    Hi Thomas,

    Thanks for sharing this idea.

    You have inspired me to write a tip on codeproject web site that has solved the limitations on your script. So I came back here to share with you hoping some one else can improve this idea even more.

    Happy coding everyone!

    Best regards…

    Celso Jr.

  26. Gaby Ferman

    Hi, how could i retrieve the values on the form to show them on my website?

  27. Stephanie Bertha

    I tried setting this up using your instructions and demo source code, but it’s not working. I must be missing something?

  28. Glen

    Great sample. Is it possible to set it up with a separate submit button and a clear button. I am new to js and have been trying a few things but none have worked yet.

  29. Héctor Mamani

    Great! How i connect with my DB? (Base Libreoffice)

  30. Vincent

    Why is not working on my cpu ?

  31. Paul Crosby

    Hey – thanks very much, Thomas! I found this useful. Initially I had trouble implementing your solution because I thought I could stick the jquery in the section. I couldn’t make heads or tails as to why it wasn’t working. Then I actually downloaded the full demo and I saw that you put the jquery toward the end of your html doc. I did the same, and then it worked. Could someone explain why in this case, especially with the $(document).ready, it wouldn’t work if it was in between the tags?

  32. pranay

    thank you it is very use ful , but i have a doubt , when iam fill the form and enter submit , i want to store the values of form in my offline databse canu please send me the code , to my mail address

  33. Eirik


    I’m stuck, but I suck. I tried to put the JS in basically anything (before and after header tag in my header.php, in the page.php, in it’s very own .js file in my JS folder and the code
    <script type="text/javascript" src="/js/formsave.js”> in my header.php) But I just can’t. The HTML works fine directly on the page, I also tried putting the whole thing into a page like you have done in the demo but still nothing (the form always works but the autosave doesn’t)

    Where am I going wrong?

  34. pinky

    plz do send me the code for plugin to save details in localstorage

  35. Myke

    Eirik – WordPress doesn’t allow $ to be used in this way because of potential conflicts.

    Enclose it like so:

    jQuery(document).ready(function($) {


  36. elena

    Hi Thomas,

    It was so so useful for me. Thank you so much for this lesson.

  37. Rose

    Hi Thomas,

    I tried a lot; but am unable to function it.

    I have used html & JS. Without using any other tools

  38. Rose

    Please help me sort out.

  39. DraunZer X

    It’s exactly what I needed for my Android app… But my app is showing an error that $ is unidentified. Any help??

  40. Jacinth

    I managed to use this coding for input text but not radio buttons. Can you advice please? what code do I need to add and where for radio buttons and also check buttons? Thanks

  41. Raúl

    Hi, sorry for the obvious question and for my poor english. Im very new on jquery, Took me a while realized that i need to put the “$(‘.stored’).change(…” inside the . ready function.

    Anyone could explain me why he use it out of it?

    Thanks a lot

Leave a Comment