Как проверить localStorage и заполнить input-ы?

Question

[Nikita_Migushev]

Есть форма регистрации. Поля Name, E-mail, Date of Birth сохраняются в localStorage.

Как правильно прописать функцию, которая проверяет, есть ли заданные значения у соответствующих ключей в localStorage, и если есть, складывает значения в соответствующие поля при перезагрузке страницы?

Для одного поля понятно, как это сделать. А для трех не совсем. Прописывать кучу IF не хочется.

window.onload = function () {

    //Set localStorage

    var userName = document.getElementById("nameField");
    var userEmail = document.getElementById("emailField");
    var userDateOfBirth = document.getElementById("dateField");


    //Wnen out of focus - set localStorage

    userName.addEventListener("focusout", (event) => {
        localStorage.setItem("userName", userName.value);
    });

     userEmail.addEventListener("focusout", (event) => {
         localStorage.setItem("userEmail", userEmail.value);
     });

      userDateOfBirth.addEventListener("focusout", (event) => {
          localStorage.setItem("userDateOfBirth", userDateOfBirth.value);
      });

    //Get localStorage

    var userNameStorage = localStorage.getItem("userName");
    var userEmailStorage = localStorage.getItem("userEmail");
    var userDateOfBirthStorage = localStorage.getItem("userDateOfBirth");

    function getLocalStorage() {
        
    }

    getLocalStorage();

};

Comments

[Nikita_Migushev]

https://jsfiddle.net/Nikita_Migushev/nmwsvj4y/2/

Answer 1

[dollar]

Попробуйте так.
Немного переписал, но не проверял на работоспособность:

Код

//document.addEventListener('DOMContentLoaded', () => { //faster
window.addEventListener('load', () => {
	//Set localStorage
	let el = {
		userName: document.getElementById("nameField"),
		userEmail: document.getElementById("emailField"),
		userDateOfBirth: document.getElementById("dateField"),
	};

	//Wnen out of focus - set localStorage
	let addFocusEvent =
		s => el[s].addEventListener("focusout",
			e => localStorage[s] = el[s].value);
	for (let k in el) addFocusEvent(k);

	//Get localStorage
	for (let k in el) el[k].value = localStorage[k] || "";
});

Comments

[Nikita_Migushev]

Не работает...

[dollar]

Nikita_Migushev, что именно?
На будущее, лучше забыть выражение "не работает". Оно имеет минимум смысла, и почти всегда есть, что сообщить полезного, чтобы помочь, в общем-то, себе же.

Немного поправил. Авось заработает.

[Nikita_Migushev]

dollar, в localStorage ничего не складывается.

[dollar]

Nikita_Migushev, ну, я проверил на другом примере, у меня всё работает.
Значит, у вас не те id, возможно.
Еще подправил немного код. Если и так не заработает, то я сдаюсь.

[Nikita_Migushev]

dollar, почему-то все равно у меня не складывается. В твоем варианте интересная конструкция. Ок, спасибо за помощь в любом случае. Вот еще решение, которое мне подсказали:

Код

const userName = document.getElementById("nameField");
    const userEmail = document.getElementById("emailField");
    const userDateOfBirth = document.getElementById("dateField");


    //Wnen out of focus - set localStorage

    userName.addEventListener("focusout", (event) => {
        localStorage.setItem(event.target.id, userName.value);
    });

    userEmail.addEventListener("focusout", (event) => {
        localStorage.setItem(event.target.id, userEmail.value);
    });

    userDateOfBirth.addEventListener("focusout", (event) => {
        localStorage.setItem(event.target.id, userDateOfBirth.value);
    });

    //Get localStorage

    function getLocalStorage() {
        const inputs = Array.from(document.querySelectorAll('input'));
     
        inputs.map(input => {
            const val = localStorage.getItem(input.id);
            return val ? input.value = val : input.value = '';
        })
    }

    getLocalStorage();

Answer 2

[akyl-kb]

Универсальный код
https://jsfiddle.net/Lfvota4r/4/

function fillForm(form) {
	var formName = form.id
  var json = localStorage.getItem('form['+ formName +']')
  var object = JSON.parse(json)
  for (var item of Object.entries(object)) {
    var key = item[0]
    var value = item[1]
    var input = form.querySelector('input[name='+ key +']')
    input.value = value
  }
}

function saveForm(form) {
	var formName = form.id
	var formData = new FormData(form)
  var object = {}
  formData.forEach(function(value, key) {
    object[key] = value
  })
  var json = JSON.stringify(object)
	localStorage.setItem('form['+ formName +']', json)
}


function syncForm(formName) {
  var form = document.getElementById(formName)

  fillForm(form)

  form.addEventListener('submit', function(event) {
    saveForm(event.target)
  })
}

syncForm('registration')