Предварительно заполните форму с локальным хранилищем - PullRequest
Новая
       12

Предварительно заполните форму с локальным хранилищем

0 голосов
/ 25 апреля 2018

Я загружаю вопросы из JSON в свой шаблон EJS и хочу заполнить каждое поле из localStorage.Следующее сохраняет последнее значение каждого выпадающего, текстового и слайдерного элемента: 

var select = document.getElementsByTagName('select');
for (var i = 0; i < select.length; i++){
    select[i].value = localStorage.getItem(i);
}
jQuery("select").change(function () {
    for (var i = 0; i < select.length; i++){
        localStorage.setItem(i, select[i].value);
    }
});

Я повторяю это для всех тегов "input".Проблема в том, что значения select также передаются в text и slider - и наоборот (т. Е. Если я введу значения для text и slider, они перезаписывают значения select, за исключениемоставлено пустым).

Моя конечная цель - сохранить самое последнее значение каждого поля формы, чтобы мои записи не терялись при обновлении страницы.

1 Ответ

0 голосов
/ 25 апреля 2018

Было бы намного элегантнее создать одну запись localStorage, представляющую ваши сохраненные значения, а не загрязнять LS множеством записей для каждого поля. Я бы порекомендовал что-то вроде этого: 

function save() {
  const selects = document.querySelectorAll('select');
  // select other element types
  // ...
  const selectValues = [...selects].map(select => select.value);
  const textValues = [...textInputs].map(textInput => textInput.value);
  const sliderValues = [...sliderInputs].map(sliderInput => sliderInput.value);
  const savedObj = { selectValues, textValues, sliderValues };
  localStorage.savedFormValues = JSON.stringify(savedObj);
}

Таким образом, вы создаете только одну запись в localStorage, и каждый тип записи довольно различен. Затем, чтобы получить значения, просто сделайте то же самое в обратном порядке: 

function populate() {
  const selects = document.querySelectorAll('select');
  // ...
  const { selectValues, textValues, sliderValues } = JSON.parse(localStorage.savedFormValues);
  selectValues.forEach((selectValue, i) => selects[i].value = selectValue);
  // ...
...