Acc*_*tor 0 javascript select local-storage google-chrome-extension
这就是我想要做的。
首先，这是在 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>
好的，我想做的是：
first value，当我选择一个值时，我希望它存储在本地存储中。所以现在在 localstorage 中它存储了 value first。second value，那么它应该覆盖 localstorage 并且现在在 localstorage 中second应该是现在存储在那里的值。choose a value（名称和值为空），而是应从 localstorage 中提取默认值，因此既然您second value之前选择了，现在second value应该是默认值.我自己想通了。
基本上，您将值存储在本地存储中，并且不会为第一个选项显示任何值。然后，而不是第一个选项上的文本，您将其留空，并在其位置放入一个 javascript，该 javascript 使用来自 localstorage 的值并将document.write该值打印为第一个选项框中的文本。
现在，明显的问题是，一开始它是空白的，所以我解决这个问题的方法是检查它是否为空，以及值是否为空（本地存储中还没有设置值），然后自动设置一个值。
此外，我不是只打印值，而是检查每个可用值，如果该值是存储在 localstorage 中的值，那么我所做的是为每个给定值打印我想要的任何文本。
查看正在运行的 jsbin 示例：http ://jsbin.com/ELOKEJU/1
您将看到是否将值更改为选项 C，然后刷新页面，选项 C 现在是默认值。
此外，它在页面重新加载后显示选项 C 的事实意味着它已成功存储在 localstorage 中，因为如果不是，则它将不显示任何内容，或者从空值中显示选项 A。这意味着您可以在其他地方使用该 localstorage 值来执行其他功能。
这是如何做到的：
页面.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 名称，以便您可以轻松理解。随意将名称更改为您喜欢的任何名称。
享受解决方案。我希望人们在未来的问题中真正帮助我。
| 归档时间： |
|
| 查看次数： |
11052 次 |
| 最近记录： |