使用 Javascript 在 HTML 中刷新后保留选项

Question

使用 Javascript 在 HTML 中刷新后保留选项

Jos*_*hba 2 html javascript local-storage

我尝试在使用本地存储进行刷新后将所选选项保留在 HTML 中。我按照此处提到的示例进行操作，下面是我的代码。

document.getElementById("interface-output").onchange = function() {
  localStorage.setItem('selectedtem', document.getElementById("interface-output").value);
};

if (localStorage.getItem('item')) {
  document.getElementById("selectedtem").options[localStorage.getItem('selectedtem')].selected = true;
}

Run Code Online (Sandbox Code Playgroud)

<div class="row" id="ott-redirect-interface-selector">
  <label>Output Interface</label><br>
  <select id="interface-output" class="browser-default">
    <option value="select">Select an interface</option>
    <option value="eth0">eth0</option>
    <option value="eth1">eth1</option>
  </select>
</div>

Run Code Online (Sandbox Code Playgroud)

不幸的是，此设置在刷新后不会保留所选选项。请问有什么建议吗？

Answer 1

man*_*mat 5

<html>
  <body>
    <div class="row" id="ott-redirect-interface-selector">
      <label>Output Interface</label><br>
      <select id="interface-output" class="browser-default">
        <option id="select" value="select">Select an interface</option>
        <option id="eth0" value="eth0">eth0</option>
        <option id="eth1" value="eth1">eth1</option>
      </select>
    </div>
    <script>
      document.getElementById('interface-output').onchange = function() {
        localStorage.setItem('selectedtem', document.getElementById('interface-output').value);
      };

      if (localStorage.getItem('selectedtem')) {
        document.getElementById('interface-output').options[localStorage.getItem('selectedtem')].selected = true;
      }
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	4613 次
最近记录：	9 年，6 月前