Как сохранить radio в Local Storage?

Question

[Zhenia Bel]

Все привет, у меня есть два radio button мне надо их вносить в Local Storage и потом после перезагрузке возвращать выбранные radio обратно вот мой html:

<table>
<tr>
                <td>Sex:</td>
                <td>
                    <input type="radio" name="sex" id="r1" value="male" class="radio">male
                    <input type="radio" name="sex" id="r2" value="famale" class="radio">famale
                </td>
            </tr>
</table>

Comments

[Сергей delphinpro]

const saved = document.querySelector(`input[name=sex][value=${localStorage.getItem('sex')}]`);
if (saved) {
  saved.checked = true;
}
document.querySelectorAll('input[name=sex]').forEach(input => {
  if(input.checked) {
    localStorage.setItem('sex', input.value);
  }
});

[Zhenia Bel]

Сергей delphinpro, У меня не заноситься radio в local storage

[Сергей delphinpro]

Zhenia Bel,

document.querySelectorAll('input[name=sex]').forEach(input => {
  input.addEventListener('change', () => {
    if(input.checked) {
      localStorage.setItem('sex', input.value);
    }
  });
});

[Zhenia Bel]

Сергей delphinpro, Спасибо заработало!

Answer 1

[SagePtr]

Не сохранять сами элементы, а только признак выбранного (например, его id или value), а при загрузке страницы - нужному элементу устанавливать атрибут checked.

Comments

[Zhenia Bel]

А можете показать как это в коде реализовать?

[Алексей]

ну для радио то валью даже не обязательно, просто флага наличия в сторадже хватит (просто чтоб не пустая строка)
r1.checked = !!( localStorage.getItem('r1') );