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

【问题标题】：html5 localStorage save input fields into form on keyuphtml5 localStorage 将输入字段保存到 keyup 的表单中
【发布时间】：2017-06-18 04:01:13
【问题描述】：

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

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

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

但我无法使用这些数据预先填充表单。

我知道在我尝试加载时最接近的 ID 是未定义的，如何获取 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>

【问题讨论】：

标签： javascript jquery html forms

【解决方案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

【讨论】：

【解决方案2】：

如果你正在使用，你可以试试Phoenix - 它是一个 jQuery 插件，用于将表单字段值保存为用户类型。

您可以在这里看到它的实际效果：http://kugaevsky.github.io/jquery-phoenix/

【讨论】：

【解决方案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/

【讨论】：