1

Есть форма с произвольным количеством элементов, необходимо сохранить данные вводимые в форме в localStorage, своими корявыми-нубскими рученкам и силами яндекса получилось сохранить все кроме состояния (checked) чекбоксов. Прошу помочь с реализацией (пишу юзерскрипт для личного пользования).

(function() {
function main(){
var elements = document.querySelectorAll("input:not([type='button']), textarea, select");

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

   (function(element) {
   var id = element.getAttribute('id');
   element.value = localStorage.getItem(id);
   element.oninput = function() {
     localStorage.setItem(id, element.value);
   };
 })(elements[i]);

  }
        setTimeout(arguments.callee,1000);
    }
setTimeout( main, 1000 );


function clearFrom()
{
    localStorage.clear();
}

var btn = document.createElement('input');
page_title.appendChild(btn);
btn.id = 'b1';
btn.type = 'button';
btn.value = 'Очистить форму';
btn.onclick = clearFrom;
})();
3
  • У чекбоксов не value, а checked
    – Darth
    18 янв 2018 в 13:48
  • @Darth Спасибо, это я понимаю, я пробовал по разному играться с checked, но увы, пока что это не принесло результатов, поэтому сюда и пишу.
    – Robodub
    18 янв 2018 в 14:48
  • Вам нужно их обрабатывать отдельно. 18 янв 2018 в 16:38

2 ответа 2

0

Пример подгоните под свои нужности сами =)

let frm = document.forms.meform,
  chkd = [];

document.addEventListener('keyup', function() { // эмулируем отправку формы, для примера, по нажатию на enter
  if (event.keyCode == 13) {
    frm.reset();
    setTimeout(function() { // эмулируем обновление страницы, для примера
      JSON.stringify(chkd); // в оригинале эта строчка заменяется нижней, закомментированной
      //chkd = JSON.stringify(localStorage.getItem('checkboxes'));
      for (i = 0; i < chkd.length; i++) {
        document.getElementById(chkd[i]).checked = true; // чекаем "соответствующие id"
      }
    }, 1000);

  }
});

frm.onclick = function(event) { // слушаем клик на форме
  if (event.target.type == "checkbox") { // если клик по чекбоксу
    let t = event.target.id; // тащим id чекбокса
    if (chkd.indexOf(t) > -1) { // если в массиве уже есть такое значение - удаляем
      chkd.splice(chkd.indexOf(t), 1);
    } else { // если нет - кладём в массив (id)
      chkd.push(t);
    } // следующая строчка в оригнале раскомментируется
    //localStorage.setItem('checkboxes', JSON.stringify(t));
  }
};
#me-form {
  background-color: lightgreen
}
<form id="me-form" name="meform">
  <input id="chk1" type="checkbox" value="1" />
  <input id="chk2" type="checkbox" value="2" />
  <input id="chk3" type="checkbox" value="3" />
  <input id="chk4" type="checkbox" value="4" />
  <input id="chk5" type="checkbox" value="5" />
  <p>press enter to emulate submit to page refreshing</p>
</form>

0

Алгоритм таков:

  • сериализовать форму в объект
  • преобразовать объект в JSON строку
  • записать в стор

Я не брезгаю jQuery и сделал бы всё в одну строку, алгоритм такой:

localStorage.myVar = JSON.stringify($('.formClassName').serializeArray());

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.