Question

这是我想要做的。

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

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);
    });
}

之后我有了代码来检索现在应该存储在localstorage中的值：

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 ，我希望它存储在本地存储中。所以现在在localstorage中存储了值 first 。
如果我决定不，我不想要那个并改为 second value ，那么它应该覆盖localstorage，现在在localstorage second 应该是现在存储的值。
下次打开页面时（在本例中为popup.html），而不是默认值 choose a value （空名称和值），而是默认值应为从本地存储中提取，因此您之前选择了 second value ，现在 second value 应该是默认值。

Answer 1

我自己想出来了。

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

现在，显而易见的问题是，首先它将是空白的，所以我解决这个问题的方法是检查它是否为null，如果值为null（还没有在localstorage中设置值），那么自动设定值。

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

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

此外，它在页面重新加载后显示选项C这一事实意味着它已成功存储在localstorage中，因为如果不是那么它将不显示任何内容，或者从空值中显示选项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'));
    });
});

P.S。在工作示例中，我使用了直观的id和localstorage名称，因此您可以轻松理解。随意将名称更改为您喜欢的名称。

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

Answer 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事件将不会发出。您可以在事件处理程序中使用此指令，而不必担心无限递归。

使用纯Java脚本，它遵循相同的逻辑。只需使用

更改以前的说明

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

Answer 3

我知道你在这里发帖已经很多年了。

我刚刚想出了一个如此简单的方法。

Javascript：

Undefined symbols for architecture arm64:
  "_main", referenced from:
     implicit entry/start for main executable
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

在 html 上

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

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

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

如何在localstorage中设置选择下拉列表的值并检索它，并将值设置为默认值，除非更改？

3 个答案: