Кэширование JS — заполните форму данными из локального хранилища.

Я пытаюсь кэшировать данные своей формы, чтобы в случае, если пользователь потеряет подключение к Интернету, он вернется и сможет восстановить информацию через локальное хранилище при обновлении страницы.

У меня есть большая форма с выпадающими списками, текстовыми полями и флажками.

Я создал локальное хранилище, в котором храню всю форму в формате 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, чтобы вернуть его в форму. Нужно ли мне делать это для всех отдельных объектов или есть общая функция.

Я проверил Заполнить HTML-форму данными, сохраненными в локальном хранилище но у меня не работает. Как я хочу.


javascript jquery caching local-storage offline-caching
person Tina    schedule 09.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте использовать

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
person Jonas0000    schedule 09.11.2017
comment
Я могу видеть значения, но значения не находятся в полях, значит ли это, что мне придется делать это индивидуально для всех из них? Как и в случае с приведенным выше кодом, в основном я печатаю все, что находится в моем локальном хранилище. - person Tina; 09.11.2017