Javascript — cохранение и восстановление введённых значений при обновлении страницы

Работаем на странице с полями для ввода данных, например заполняем какую то анкету — случайно закрыли или завис браузер, или просто обновили страницу и херак — все введённые данные пропали 🙁 знакомая ситуация? думаю что да

Для решения этой задачи на просторах родного рунета нарыл такой скриптик на нативном яваскрипте

if (window.localStorage) {
  var elements = document.querySelectorAll(‘[name]’);
 
  for (var i = 0, length = elements.length; i < length; i++) {
    (function(element) {
      var name = element.getAttribute(‘name’);
 
      element.value = localStorage.getItem(name) || »;
 
      element.onkeyup = function() {
        localStorage.setItem(name, element.value);
      };
    })(elements[i]);
  }
}

if (window.localStorage) {

var elements = document.querySelectorAll(‘[name]’);

for (var i = 0, length = elements.length; i < length; i++) {

(function(element) {

var name = element.getAttribute(‘name’);

element.value = localStorage.getItem(name) || »;

element.onkeyup = function() {

localStorage.setItem(name, element.value);

};

})(elements[i]);

}

Всё бы ничего, но мне в шаблонах зачастую приходится выводить поля с уже заполненными данными из базы данных (например цена).

Собственно, для полей которые нужно запоминать я ввёл дополнительный атрибут data-save и чуток допилил скрипт, на предмет проверки данного аттрибута при восстановлении введённых ранее значений.

if (window.localStorage) {
  var elements = document.querySelectorAll(‘[name]’);
 
  for (var i = 0, length = elements.length; i < length; i++) {
    (function(element) {
        var name = element.getAttribute(‘name’);
        var save = element.getAttribute(‘data-save’);
        if(save) {
           element.value = localStorage.getItem(name) || »;
           element.onkeyup = function() {
           localStorage.setItem(name, element.value);
        }
      };
    })(elements[i]);
  }
}