Как в sessionstorage сохранить данные формы?

Question

Помогите разобраться, предположим есть следующий код формы:

<form>
    <input type="text" id="text">
    <select name="list">
      <option>Val_1</option>
      <option>Val_2</option>
    </select>
</form>

Задача состоит в том, что необходимо данные которые были введены в форму сохранить (без отправки на сервер) чтобы например при перезагрузке страницы они не исчезли.

На JS написал следующий скрипт

document.getElementById("text").onkeyup = () => sessionStorage.setItem("save", text.value);
document.getElementById("text").value = sessionStorage.getItem("save");

Он замечательно работает, но только для элемент input, а как можно сохранить остальные значения, включая выбранный элемент из списка?

Answer 1

let select = document.querySelector('select[name="list"]')

select.onclick = () => {
  sessionStorage.setItem('selIndx', select.selectedIndex)
}

if(sessionStorage.getItem('selIndx')) select.selectedIndex = +sessionStorage.getItem('selIndx')

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

БЛОГ НА HUSL

Как в sessionstorage сохранить данные формы?

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