Javascript html5 localStorage在键控时将输入字段保存到表单中

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

因此，如果用户返回表单，他们已经填写的数据可以从本地存储中加载

我有下面这是存储在本地存储数据，因为我想

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

我知道当我尝试加载closestID时，closestID是未定义的，我如何获取每个员工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>

jQuery（“输入”）.keyup（函数（）{
var closestID=jQuery（this）.closest（'[id]'）.attr（'id'）；
var staffArray=$（“#”+closestID+“输入”）.map（函数（）{
返回{
“title”：这个名字，
“值”：这个值
}
}).get（）；
//将其设置为localStorage
localStorage[“id-”+closestID]=JSON.stringify（staffArray）；
});
var getFromStore=函数（closestID）{
//检查存储值是否为null，如果为null，则使存储为=[]
var store=[undefined，null].indexOf（localStorage[“id-”+closestID]）！=-1？[]：JSON.parse（localStorage[“id-”+closestID]）；
//检查仓库是否是空的
如果（store.length！=0）{
//如果存储不是空的，则循环存储并将内容附加到myStorage div中
用于（存储中的var k）{
var myTitle=store[k][“title”]；
var myVal=存储[k][“值”]；
console.log（'myTitle'+myTitle）；
console.log（'myVal'+myVal）；
$（“#”+closestID+“输入[name=”“+myTitle+“]”）attr（“value”，myVal）；
}
}
}
getFromStore（closestID）；

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

$('#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 );
          }

        }
    });
}

---

jsiddle在这里

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

$('#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 );
          }

        }
    });
}

JSFIDLE在这里

没什么特别的：

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);
    }
});

var input=document.getElementsByTagName（'input'）；
//取回
对于（变量i=0；i

没什么特别的：

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);
    }
});

var input=document.getElementsByTagName（'input'）；
//取回
对于（变量i=0；i

---

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

---

您可以在这里看到它的作用：

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

你可以在这里看到它的作用：