Изменяемое выпадающее меню HTML в javascript localStorage

#javascript #html #local-storage #dropdown

#javascript #HTML #локальное хранилище #выпадающий

Вопрос:

Я создал базовое выпадающее меню, параметры которого создаются, когда пользователь вводит текст в текстовое поле и нажимает кнопку «Создать параметр«.

Нужна помощь в сохранении выпадающего меню со всеми параметрами, созданными пользователем в localStorage, когда пользователь нажимает кнопку Сохранения.

и поэтому, когда пользователь перезагружает страницу, параметры, созданные пользователем, все равно будут видны? С чистым Javascript?

Мой код до сих пор:

 <!DOCTYPE html>
<html>
<div id="name">
  <select id="sel"></select>
  <input type="text" class="auto-save" id="inputname">
  <button id="button" onclick="newnamefunc(); document.getElementById('inputname').value='';">Create Option</button><button id="save">Save</button></div>
<script>
  const saved = localStorage.getItem('select')
  const sel = document.getElementById('sel')
  if (document.getElementById('sel')) {
    sel.innerHTML = saved
  }


  function newnamefunc() {
    const inputval = document.getElementById('inputname').value;
    const createname = document.createElement("option");
    const namevalue = document.createTextNode(inputval);
    createname.appendChild(namevalue);

    const element = document.getElementById("sel");
    element.appendChild(createname);
  }
  /html>

Развернуть фрагмент

Любая помощь приветствуется.

Ответ №1:

Поможет ли это? Я установил innerHTML для выбора значение localStorage и обновил выбор при загрузке окна.

 const saved = localStorage.getItem('select')

window.onload = function (){
    document.getElementById('sel').innerHTML = saved
      
};

function newnamefunc() {
  const inputval = document.getElementById('inputname').value;
  const createname = document.createElement("option");
  const namevalue = document.createTextNode(inputval);
  createname.appendChild(namevalue);

  const element = document.getElementById("sel");
  element.appendChild(createname);
}

function save(){
  var select = document.getElementById("sel").innerHTML;
  localStorage.setItem("select", select);

}

 <div id="name">
        <select id="sel"></select>
        <input type="text" class="auto-save" id="inputname">
        <button id="button" onclick="newnamefunc(); document.getElementById('inputname').value='';">Create Option</button>
        <button id="save" onclick="save()">Save</button>
      </div>

Развернуть фрагмент