如何在本地存储中设置选择下拉列表的值并检索它以及将值设置为默认值，除非更改？答案

【问题标题】：How to set the value of select dropdown in localstorage and retrieve it as well as set the value as default unless changed?如何在本地存储中设置选择下拉列表的值并检索它以及将值设置为默认值，除非更改？
【发布时间】：2013-10-10 23:59:34
【问题描述】：

这就是我想要做的。

首先，这是在 Chrome 扩展程序中。
在 popup.js 文件中，它在 popup.html 上运行（此代码用于设置值，当我选择选择选项时）：

function mySelectValue() {
    // Add an event listener for the value
    document.getElementById('mySelectValue').addEventListener('change', function() {
      // Get the value of the name field.
      var mySelectValue = document.getElementById('mySelectValue').value;

      // Save the name in localStorage.
      localStorage.setItem('mySelectValue', mySelectValue);
    });
}

现在我有代码来检索现在应该存储在本地存储中的值：

function getAndDisplayTheValue() {
    myValue = localStorage.getItem('mySelectValue');
    document.write(myValue);
}

好的，这就是javascript文件。现在这里是 popup.html 文件：

            <select id="mySelectValue">
                <option name="" value="">choose a value</option>
                    <option value="first" name="first">first value</option>
                    <option value="second" name="second">second value</option>
                    <option value="third" name="third">third value</option>
            </select>

好吧，我想做的是：

当我选择一个值时，例如 first value，我希望它存储在本地存储中。所以现在它在本地存储中存储了值 first。
如果我决定不，我不想这样做并更改为 second value，那么它应该覆盖本地存储，现在在本地存储中 second 应该是现在存储在那里的值。
下次打开页面时（在本例中为 popup.html），而不是默认值是 choose a value（具有空名称和值），而是应该从localstorage 既然你之前选择了 second value，现在 second value 应该是默认值了。

【问题讨论】：

标签： javascript select google-chrome-extension local-storage

【解决方案1】：

我自己想通了。

基本上，您将值存储在本地存储中，并且您不会为第一个选项显示任何值。然后，不是第一个选项上的文本，而是将其留空，并在其位置放入一个 javascript，该 javascript 使用来自 localstorage 和 document.write 的值将值作为文本打印在第一个选项框中。

现在，明显的问题是，一开始它是空白的，所以我解决这个问题的方法是检查它是否为空，如果值为空（在 localstorage 中还没有设置值），那么自动设置一个值。

此外，我不是只打印值，而是检查每个可用值，如果该值是存储在本地存储中的值，那么我所做的就是为每个给定值打印我想要的任何文本。

查看有效的 jsbin 示例：http://jsbin.com/ELOKEJU/1
您将看到是否将值更改为选项 C，然后刷新页面，选项 C 现在是默认值。

此外，它在页面重新加载后显示选项 C 的事实意味着它已成功存储在本地存储中，因为如果不是，则它不会显示任何内容，或者来自 null 值的选项 A。这意味着您可以在其他地方使用该 localstorage 值来执行其他功能。

这是怎么做的：

page.html

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="js/background.js"></script>
</head>
<body>
  <select id="myDynamicSelectBox">
      <option value=""><script type="text/javascript" src="js/theStoredValue.js"></script>
      </option>
      <option value="a">Option A</option>
      <option value="b">Option B</option>
      <option value="c">Option C</option>
      <option value="d">Option D</option>
      <option value="e">Option E</option>
  </select>
</body>
</html>

js/theStoredValue.js

if (localStorage.getItem('mySelectLocalstorageValue') === null) { 
                localStorage.setItem('mySelectLocalstorageValue', "a");
                document.write("Option A"); 
            }
            else {
                if (localStorage.getItem('mySelectLocalstorageValue') === "a") { 
                    document.write("Option A"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "b") { 
                    document.write("Option B"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "c") { 
                    document.write("Option C"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "d") { 
                    document.write("Option D"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "e") { 
                    document.write("Option E"); 
                }
            }

js/background.js

$(document).ready(function(){
    $('#myDynamicSelectBox').change(function(){
         localStorage.setItem('mySelectLocalstorageValue', $(this).val());
         $('#myDynamicSelectBox').value(localStorage.getItem('mySelectLocalstorageValue'));
    });
});

附言在工作示例中，我使用了直观的 id 和 localstorage 名称，以便您轻松理解。随意将名称更改为您喜欢的任何名称。

享受解决方案。我希望人们在以后的问题上能真正帮助我。

【讨论】：

谢谢。这对我帮助很大。

【解决方案2】：

使用 jQuery 你可以使用类似的东西：

let value = localStorage.getItem("key");
$("select#mySelectBox").val(value);

您可以设置您放入 value 属性中的值之一。

<select>
    <option value="a">First Value</option>
    <option value="b">Second Value</option>
    <option value="c">Third Value</option>
</select>

在此示例中，您从 localStorage 获得的值应为以下之一：a、b 或 c。不会发出 change 事件。您可以在事件处理程序中使用此指令，而不必担心无限递归。

使用纯 Javascript 遵循相同的逻辑。只需用

更改之前的说明

document.querySelector("select#mySelectBox").value = theValueFromLocalStorage

【讨论】：

【解决方案3】：

我知道你在这里发帖已经好几年了。

我刚刚想出了这么简单的方法。

Javascript：

var variablestoraged = localStorage.getItem("variablestoragedname"); 

if(localStorage.getItem("variablestoraged").length>0){
    document.getElementById(variablestoraged).selected = "true";
} else{}

在 html 上

    <option value="Male" id="Male">Male</option>
    <option value="Female" id="Female">Female</option>

希望它对其他人有所帮助，我在 2021 年遇到了这个问题

【讨论】：