Как сохранить состояние для radio-кнопок, checkbox, select

Question

Есть форма с селектом, инпутами, радио, чекбоксами и т.п. Необходимо, чтобы при обновлении данные сохранялись (localstorage мне в помощь)

Но у меня возникает вопрос с перебором множества чекбоксов, селектов и т.п как эти данные поместить в один объект, например? Создаватьвложенный бъект?

Внизу привожу то, что сумел реализовать)

let form = document.querySelector('form')
let input = document.querySelector('input')
let textarea = document.querySelector('textarea')
let checkbox = document.querySelector('input[type=checkbox]')
let radiobuttons = document.querySelectorAll('input[type=radio]:checked')

if (localStorage.getItem('param') !== null) {
  let param = JSON.parse(localStorage.getItem('param'));
  input.value = param.input
  textarea.value = param.textarea
  checkbox.checked = param.checkbox
}
document.addEventListener('input', function(e) {
  localStorage.setItem('param', JSON.stringify({input: input.value, textarea: textarea.value, checkbox: checkbox.checked}))
})

<form action="">
<input type="text"/>
<textarea name="t" id="text"></textarea>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id=""/>
    <label class="form-check-label" for=""> Default checkbox </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id=""/>
    <label class="form-check-label" for=""> Checked checkbox </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="" id=""/>
    <label class="form-check-label" for=""> Default radio </label>
</div>
<div class="form-check">
    <input
            class="form-check-input"
            type="radio"
            name=""
            id=""
    />
    <label class="form-check-label" for=""> Default radio </label>
    <div class="form-check">
        <input
                class="form-check-input"
                type="radio"
                name=""
                id=""
        />
        <label class="form-check-label" for=""> Default radio </label>
    </div>

    <select name="select" id="select">
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
    </select>
</div>
</form>

Answer 1

Размечаете все элементы формы своим id, так же размечаете каким нибудь атрибутом элементы формы, которые должны сохраняться(у меня в примере это data-save)

Что делает скрипт:

Отбирает элемент form Далее внутри form находит все элементы с атрибутом data-save.

При изменении проходит все выбранные элементы и сохраняет их значения в объект со структурой [id_элемента]: значение_элемента и сохраняет в localStorage.

При загрузке сраницы, беруться данные из localStorage и записываются в отобранные элементы по своему id

const form = document.querySelector('form')
const saves = form.querySelectorAll('[data-save]');

document.addEventListener('DOMContentLoaded', () => {
  const param = JSON.parse(localStorage.getItem('param') || '{}');
  saves.forEach(item => {
    if (item.type === 'radio' || item.type === 'checkbox') {
      item.checked = param[item.id] ?? false
    } else {
      item.value = param[item.id] ?? ''
    }
  });
})

document.addEventListener('input', function(e) {
  const param = {} 
  saves.forEach(item => {
    param[item.id] = (item.type === 'radio' || item.type === 'checkbox') ? item.checked : item.value;
  });
  localStorage.setItem('param', JSON.stringify(param));
})

<form action="">
  <input data-save type="text" id="inp1" /><br />
  <input data-save type="text" id="inp2" /><br />
  <textarea data-save name="t" id="text"></textarea><br />
  <textarea data-save name="t" id="text2"></textarea><br />
  <div class="form-check">
    <input data-save class="form-check-input" type="checkbox" value="0" id="inp3"/>
    <input data-save class="form-check-input" type="checkbox" value="1" id="inp4"/>
    <label class="form-check-label" for=""> Default checkbox </label>
  </div>
  <div class="form-check">
    <input data-save class="form-check-input" type="radio" value="0" id="inp5" name="r2" />
    <input data-save class="form-check-input" type="radio" value="1" id="inp6" name="r2" />
    <label class="form-check-label" for=""> Checked checkbox </label>
  </div>

  <select data-save name="select" id="select">
    <option value="name1">name1</option>
    <option value="name2">name2</option>
    <option value="name3">name3</option>
  </select>
</form>

У input с типом radio и checkbox нет value, есть свойство checked.

P.S.: Возможно я какие то типы или элементы пропустил, думаю не составит труда подправить этот скрипт под их особенности

БЛОГ НА HUSL

Как сохранить состояние для radio-кнопок, checkbox, select

Ответы (1 шт):