如何使用WebExtensions存储API还原复选框的状态

Question

我正在构建一个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);

Answer 1

set操作后的存储状态如下：

{
  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 。
如果要查询单个顶级密钥，请将其作为字符串传递。
如果您需要一组事先知道的顶级密钥，请传递一组密钥字符串。
如果要在密钥不在存储区中时提供默认值，请将对象映射密钥传递给默认值。

以下是使用默认值组织代码的方法：

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兼容的代码将是

for (let setting in defaults) {
  // shallow copy default settings
  settings[setting] = Object.assign({}, defaults[setting]);
  // override show property
  settings[setting].show = form[setting].checked;
}

不太简洁，更兼容。

如何使用WebExtensions存储API还原复选框的状态

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-09 10:57:13

如何使用WebExtensions存储API还原复选框的状态

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-09 10:57:13

解决方案1
1 已采纳 2017-08-09 10:57:13