这就是我正在尝试做的事情。
首先，这是在 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。 - 如果我决定不，我不想要这个并更改为
第二个值，那么它应该覆盖本地存储，现在在本地存储第二个应该是现在存储在那里的值。 - 下次打开页面(在本例中为 popup.html)时，默认值不是
选择一个值(名称和值均为空)，而是默认值应该从本地存储中提取，因此由于您之前选择了第二个值，现在第二个值应该是默认值。
最佳答案
我自己解决了。
基本上，您将值存储在本地存储中，并且不会显示第一个选项的任何值。然后，您将其留空，而不是第一个选项上的文本，并在其位置放置一个 JavaScript，该 JavaScript 使用 localstorage 中的值和 document.write 将值作为第一个选项中的文本打印出来选项框。
现在，明显的问题是，一开始它是空白的，所以我解决这个问题的方法是检查它是否为空，以及该值是否为空(本地存储中尚未设置值)，然后自动设置一个值。
此外，我不是只打印值，而是检查每个可用值，如果该值是存储在本地存储中的值，那么我所做的就是为每个给定值打印我想要的任何文本。
查看工作 jsbin 示例:http://jsbin.com/ELOKEJU/1
如果将值更改为选项 C，然后刷新页面，您会看到选项 C 现在是默认值。
此外，页面重新加载后显示选项 C 的事实意味着它已成功存储在本地存储中，因为如果没有，则不会显示任何内容，或者选项 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 名称，以便您可以轻松理解。请随意将名称更改为您喜欢的任何名称。
享受解决方案。我希望人们在以后的问题上真正帮助我。
关于javascript - 如何在本地存储中设置选择下拉列表的值并检索它以及将该值设置为默认值(除非更改)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19173562/