我正在构建一个 Firefox Web 扩展，我想为其用户提供一些可以选中/取消选中的选项。复选框的状态通过 WebExtensions 存储 API 保存在本地，但我不太确定如何恢复每个选项的保存状态。
这是options.html 文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<fieldset>
<legend>My favorite veggies</legend>
<input type="checkbox" name="eggplant" id="eggplant" />Eggplant<br />
<input type="checkbox" name="zucchini" id="zucchini" />Zucchini<br />
<input type="checkbox" name="tomatoe" id="tomatoe" />Tomatoe<br />
<input type="submit" value="Submit" />
</fieldset>
</form>
<script src="options.js"></script>
</body>
</html>保存/恢复复选框状态的options.js文件如下:
function onError(error) {
console.log(`Error: ${error}`);
}
function saveOptions(e) {
// List of search engines to be used
let eggplant = {
name: "Eggplant",
imageUrl: "https://www.organicfacts.net/wp-content/uploads/2013/06/Eggplant-1020x765.jpg",
show: form.eggplant.checked
};
let zucchini = {
name: "Zucchini",
imageUrl: "https://www.organicfacts.net/wp-content/uploads/zucchini.jpg",
show: form.zucchini.checked
};
let tomatoe = {
name: "Tomatoe",
imageUrl: "https://www.organicfacts.net/wp-content/uploads/2013/05/Organictomato1-1020x765.jpg",
show: form.tomatoe.checked
};
let setting = browser.storage.sync.set({
eggplant,
zucchini,
tomatoe
});
setting.then(null,onError);
e.preventDefault();
}
function restoreOptions() {
var gettingItem = browser.storage.sync.get({
'show'
});
gettingItem.then((res) => {
document.getElementById("eggplant").checked = eggplant.show;
document.getElementById("zucchini").checked = zucchini.show;
document.getElementById("tomatoe").checked = tomatoe.show;
});
}
document.addEventListener('DOMContentLoaded', restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);最佳答案
以下是设置操作后的存储状态:
{
eggplant: {
name: "Eggplant",
imageUrl: "https://www.organicfacts.net/wp-content/uploads/2013/06/Eggplant-1020x765.jpg",
show: true
},
zucchini: { /* ... */ },
tomatoe: { /* ... */ }
}
但是，在 restoreOptions 中，您可以使用键 "show" 查询存储 - 或者更具体地说，使用语法不正确的对象文字 {"show “}。
即使您将其修复为“show”也不是这样的顶级键(这是您允许的唯一查询类型)，因此结果显示为空。
- 如果要查询整个存储，请传递
null。 - 如果您想查询单个顶级键，请将其作为字符串传递。
- 如果您想要一组预先知道的顶级 key ，请传递一个 key 字符串数组。
- 如果您想提供默认值以防 key 不在存储中，请传递将 key 映射到默认值的对象。
以下是如何使用默认值组织代码:
const defaults = {
eggplant: {
name: "Eggplant",
imageUrl: "(redacted for brevity)",
show: false
},
zucchini: {
name: "Zucchini",
imageUrl: "(redacted for brevity)",
show: false
},
tomatoe: {
name: "Tomatoe",
imageUrl: "(redacted for brevity)",
show: false
}
};
function saveOptions() {
let settings = {}
for (let setting in defaults) {
settings[setting] = {
...defaults[setting], // spread the default values
show: form[setting].checked // override show with real data
}
}
browser.storage.sync.set(settings).then(null, onError);
}
function restoreOptions() {
browser.storage.sync.get(defaults).then(
(data) => {
document.getElementById("eggplant").checked = data.eggplant.show;
document.getElementById("zucchini").checked = data.zucchini.show;
document.getElementById("tomatoe").checked = data.tomatoe.show;
}
);
}
值得注意的是:不要使用submit和preventDefault，只需使用type="button"输入并click.
小编辑:对象传播(...defaults[setting])仍处于实验阶段(尽管最近的 Chrome/FF 支持)，更多 ES6-compliant code将会是
for (let setting in defaults) {
// shallow copy default settings
settings[setting] = Object.assign({}, defaults[setting]);
// override show property
settings[setting].show = form[setting].checked;
}
不太简洁，但更具兼容性。
关于javascript - 如何使用 WebExtensions 存储 API 恢复复选框的状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45587933/