Question

我正在尝试缓存我的表单数据，以防万一用户丢失互联网连接并返回，并在刷新页面时通过本地存储恢复信息。

我有一个大型表单，其中包含下拉列表，文本框和复选框。

我创建了一个localstorage，我在其中以JSON格式存储整个表单。

function CacheData() 
{
    var yourObject = $('#application-form').serializeObject();
     localStorage.setItem('testObject', JSON.stringify(yourObject));
}

jQuery.fn.serializeObject = function () {
    var formData = {};
    var formArray = this.serializeArray();
    for (var i = 0, n = formArray.length; i < n; ++i)
         formData[formArray[i].name] = formArray[i].value;

    return formData;
  };

但是现在，刷新页面后，我想显示存储在本地存储中的数据，以便自动填入字段。

var myData = JSON.parse(localStorage.getItem("testObject"));

if (myData != null) {
     document.getElementById("application-form").innerHTML = myData;
}

有了这个我只是写了Object对象，我的所有字段都消失了。如何对Json对象进行去序列化以将其放回形式。我是否需要为所有单个对象执行操作，或者是否存在通用函数。

我查了Populate HTML form with data saved on Local Storage，但它不适合我。我想要的方式。

Answer 1

尝试使用

var myData = JSON.parse(localStorage.getItem("testObject"));

if (myData != null) {
    document.getElementById("application-form").innerHTML = JSON.stringify(myData);
}

而不是像这样编辑你的功能：

document.getElementById("application-form").innerHTML = myData.YourFieldName

JS缓存 - 使用本地存储中的数据填充表单

1 个答案: