javascript localStorage中可更改的HTML下拉菜单答案

【问题标题】：Changeable HTML dropdown menu in javascript localStoragejavascript localStorage中可更改的HTML下拉菜单
【发布时间】：2020-12-03 09:26:44
【问题描述】：

我制作了一个基本的下拉菜单，当用户在文本字段中输入文本并按下 创建选项 按钮时会创建其选项。

当用户单击保存按钮时，需要帮助存储下拉菜单以及用户在 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>

任何和所有帮助表示赞赏。

【问题讨论】：

你的保存按钮/功能在哪里？你试过什么了？ localStorage 只支持存储文本/字符串，所以你需要考虑到这一点。

标签： javascript html local-storage dropdown

【解决方案1】：

这会有帮助吗？我将select的innerHTML设置为localStorage，并在加载窗口时更新了select。

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>

【讨论】：

@vedant12355 很高兴为您提供帮助:)