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