html5 localStorage save input fields into form on keyup

Question

I have a form where I want to save the data in local storage on keyup.

So if the user comes back to the form the data they have already filled in can be loaded from their localStorage.

I have the below see fiddle which is storing the data in local storage as I want.

But I am having trouble pre populating the form with this data.

I know that closestID is undefined when I try and load it, how can I get the value for each id of Staff so that I can populate my form, or is there a better way?

    <form id="myForm">
        <div id="div-1" class="staff">
            <input type="name" name="name" value="Tim">
            <input type="number" name="age" value="18">
        </div>
        <div id="div-2" class="staff">
            <input type="name" name="name" value="Sarah">
            <input type="number" name="age" value="32">
        </div>
        <div id="div-3" class="staff">
            <input type="name" name="name" value="Brendan">
            <input type="number" name="age" value="48">
        </div>
    </form>

    <script>
    jQuery("input").keyup(function () {
        var closestID = jQuery(this).closest('[id]').attr('id');
        var staffArray = $("#" + closestID + " input").map(function () {
            return {
                "title": this.name,
                "value": this.value
            }
        }).get();
        //set that to localStorage
        localStorage["id-" + closestID] = JSON.stringify(staffArray);
    });

    var getFromStore = function (closestID) {
        //check if store values are null, if null, make store =[]
        var store = [undefined, null].indexOf(localStorage["id-" + closestID]) != -1 ? [] : JSON.parse(localStorage["id-" + closestID]);
        //check if store is empty
        if (store.length != 0) {
            //loop over store if it aint empty and append the content into myStorage div
            for (var k in store) {
                var myTitle = store[k]["title"];
                var myVal = store[k]["value"];
                console.log('myTitle ' + myTitle);
                console.log('myVal ' + myVal);
                $("#" + closestID + " input[name='" + myTitle + "']").attr( "value", myVal );
            }
        }
    }

    getFromStore(closestID);
    </script>

jhyap · Accepted Answer · 2014-05-23 06:22:34Z

3

Nothing fancy:

var input = document.getElementsByTagName('input');


//retrieve 
for (var i = 0; i < input.length; i++){
    input[i].value = localStorage.getItem(i);
}

//store
jQuery("input").keyup(function () {
    for (var i = 0; i < input.length; i++){
        localStorage.setItem(i, input[i].value);
    }
});

JSFiddle

answered May 23, 2014 at 6:22

jhyap

3,8496 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris O'Sullivan · Accepted Answer · 2015-10-08 15:02:17Z

2

If you're using you could try out Phoenix - it's a jQuery plugin for saving form fields values as the user types.

You can see it in action here: http://kugaevsky.github.io/jquery-phoenix/

answered Oct 8, 2015 at 15:02

Chris O'Sullivan

1,27216 silver badges22 bronze badges

Comments

paaacman · Accepted Answer · 2017-06-17 20:01:13Z

1

You need to identify which elements where used for storing the data. So you can use selector to find all elements which can be used as identification

$('#myForm > div')

Inside getFromStore you will iterate through div elements and try to find by ID whether localStorage contains the data.

var getFromStore = function ($storredElements) {

    $storredElements.each(function() {
        var sorred = localStorage["id-" + this.id];
        if (sorred) {
           var staffArray = JSON.parse(sorred);
           for (var k in staffArray) {
              var myTitle = staffArray[k]["title"];
              var myVal = staffArray[k]["value"];
              $("input[name='" + myTitle + "']", this).val( myVal );
          }

        }
    });
}

jsfiddle is here http://jsfiddle.net/d5Z8s/

edited Jun 17, 2017 at 20:01

paaacman

3,0221 gold badge23 silver badges19 bronze badges

answered May 23, 2014 at 5:59

Martin Surynek

6586 silver badges9 bronze badges

Collectives™ on Stack Overflow

html5 localStorage save input fields into form on keyup

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related