0

这是我想要做的。

首先，这是在 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);
    });
}

现在，我有代码来检索现在应该存储在 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>

好的，我想做的是：

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

3 回答 3

6

我自己想通了。

基本上，您将值存储在本地存储中，并且您不会为第一个选项显示任何值。然后，不是第一个选项上的文本，而是将其留空，并在其位置放入一个使用来自 localstorage 的值的 javascript，并将该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'));
    });
});

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

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

于 2013-10-15T14:18:01.423 回答
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
于 2018-11-24T23:12:08.217 回答
0

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

我只是想出了一个简单的方法来做到这一点。

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 年与此斗争

于 2021-02-11T00:29:49.617 回答