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

Question

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

我有一个带有下拉菜单、文本框和复选框的大表单。

我创建了一个本地存储，以 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