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是异步的，因此您的警报注定要失败

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

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);

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

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

2 个答案: