如何使用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