JSキャッシング - ローカルストレージからのデータをフォームに戻す

Question

フォームデータをキャッシュして、ユーザーがインターネット接続を失って戻ってくると、ページを更新したときにローカルストレージを介して情報を回復できるようにします。

私はドロップダウン、テキストボックス、チェックボックスを持つ大きなフォームを持っています。

フォーム全体をJSON形式で保存するlocalstorageを作成しました。

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