Firefox 扩展：如何将 javascript 变量的值保存到本地存储？

Question

我的扩展程序的弹出窗口有一个复选框：

<div id="popup-content">
  <input id="checkBox" type="checkbox">
</div>

现在的设置方式是，如果我单击工具栏上的扩展程序图标并选中弹出窗口中的复选框，当弹出窗口消失时即不会保存复选框的值，即如果我再次打开弹出窗口它显示该复选框未选中。我做了一些搜索，发现我需要使用 storage api 并将变量存储在存储中，但我不确定如何继续。我在 storage api documentation 中看到了示例，但它们都使用键和值而不是简单的变量。这是我的 js 文件现在的样子：

document.getElementById('checkBox').addEventListener('change', function() {
  var m = document.getElementById("checkBox").checked;
  browser.storage.local.set(m);
  alert(browser.storage.local.get("m"));
});

我显然在这里做错了什么，因为我没有收到任何说明复选框值的警告消息。我究竟做错了什么？此外，这只是问题的一半。我该如何设置它，以便在我重新打开弹出窗口时，复选框将显示已选中（如果之前已选中）？

Answer 1

首先，browser.storage.local.set是异步的，所以你的alert注定失败

其次，根据你实际链接的文档，用法如下

document.getElementById('checkBox').addEventListener('change', function() {
  var m = document.getElementById("checkBox").checked;
  browser.storage.local.set({m})
  .then(() => browser.storage.local.get({m:''}))
  .then(({m}) => alert(m));
});

弹出窗口打开后，您可以执行以下操作

browser.storage.local.get({m:''}).then(value => document.getElementById("checkBox").checked = !!value);

尽管我不太清楚你在代码中的哪个位置这样做

Answer 2

您的问题的完整解决方案可能如下：

myObject = {};

function writeParameter(a) {document.getElementById("checkBox").checked = !!a.myObject.myKey;}

function saveOptions(e) {
  t = document.getElementById("checkBox").checked;
  myObject.myKey = t;
  browser.storage.local.set({myObject}).this();
  e.preventDefault();
}

function restoreOptions() {
  browser.storage.local.get('myObject').then(writeParameter);
}

document.addEventListener('DOMContentLoaded', restoreOptions); //Restore defaults on DOM load...
document.getElementById('checkBox').addEventListener("change", saveOptions);

请注意在 browser.storage 对象中使用了 `this()'。在这种情况下可能没有必要使用它，但它与其他形式的记录一起使用。还要确保您的清单文件包含所有正确的条目。

Firefox 扩展：如何将 javascript 变量的值保存到本地存储？

Firefox extensions: How to save the value of a javascript variable to local storage?

javascript

checkbox

firefox

firefox-addon-webextensions

webextension-storage