Question

我有一个表单，我想在keyup上将数据保存在本地存储中。

因此，如果用户返回表单，他们已经填写的数据可以从他们的localStorage加载。

我有以下see fiddle，它根据需要将数据存储在本地存储中。

但是我在使用这些数据填充表单时遇到问题。

我知道当我尝试加载它时，beyondID是未定义的，我如何获取Staff的每个id的值，以便我可以填充我的表单，还是有更好的方法？

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

Answer 1

没什么好看的：

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

Answer 2

如果您正在使用，可以尝试Phoenix - 它是一个jQuery插件，用于在用户输入时保存表单字段值。

您可以在此处看到它：http://kugaevsky.github.io/jquery-phoenix/

Answer 3

您需要确定用于存储数据的元素。因此，您可以使用选择器查找可用作标识的所有元素

$('#myForm > div')

在getFromStore中，您将迭代div元素并尝试按ID查找localStorage是否包含数据。

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在这里http://jsfiddle.net/d5Z8s/

html5 localStorage将输入字段保存到keyup上的表单中

3 个答案: