将chrome扩展选项保存到chrome.storage？

Question

我正在制作一个带有options.html页面的Chrome扩展程序.

在选项页面上,我有3个复选框.选中/取消选中其中一个复选框后,使用chrome.storage.sync.set()将该复选框的值保存到chrome.storage或从chrome.storage中删除.但是一旦使用chrome.storage.sync.get()保存数据,我似乎无法检索数据.

这是我的代码:

options.html:

<div class="checkboxes">
    <input id="test1" name="test1" type="checkbox">       
    <input id="test2" name="test2" type="checkbox">
    <input id="test3" name="test3" type="checkbox">
</div>

options.js:

$(document).ready(function() {

  var storage = chrome.storage.sync;

  //Retrieve existing settings
  $(':checkbox').each(function() {
    $(this).prop('checked', function() {
      var name = this.name;
      storage.get(name, function(test){
        console.log(test[name]);
      });
    });
  });

  $(".checkboxes").on("change", ":checkbox", saveSettings);

  //Save or delete settings
  function saveSettings() {
    var name = this.name;   

    if($(this).is(':checked')) {
      storage.set({name:'checked'},function(){
        console.log("saved");
      });
    }
    else {
      storage.remove(name, function(){
        console.log("removed");
      });
    }
  }

});

以上产出:

console.log(test[name]); > undefined
console.log("saved");    > saved
console.log("removed");  > removed

为什么我会"未定义"？

我使用localStorage累了同样的事情,这只适用于option.js.但是当我试图在background.js上检索存储的数据时,它不起作用.我认为他们的localStorage细节彼此无法访问.

我还应该提到我不是javascript/jquery中最好的,我还在学习,所以请原谅我的错误.

Answer 1

你有两个主要问题:

1. chrome.storage.sync.get是异步的,而函数jQuery.fn.prop(propertyName, function(index, oldPropertyValue) )必须同步返回所需的值.
2. storage.set({name:'checked'}, ...);将创建一个名为"name" 的属性,其值为"checked",而不是name具有值为"checked" 的变量中指定的名称的属性.

要解决第一个问题,请交换操作顺序:首先读取首选项,然后设置属性:

//Retrieve existing settings
$(':checkbox').each(function(index, element) {
    var name = this.name;
    storage.get(name, function(items) {
        element.checked = items[name]; // true  OR  false / undefined (=false)
    });
});

要解决第二个问题,首先创建一个对象,分配新属性,然后保存结果.注意:由于复选框只能有两种状态,我建议不保存字符串"checked",但使用布尔值(true/false):

function saveSettings() {
    var name = this.name;
    var items = {};
    items[name] = this.checked;
    storage.set(items, function() {
        console.log("saved");
    });
}

PS.当您确定要处理复选框时,请使用element.checked而不是$(element).is(':checked').前者更短更快.使用jQuery在这里没有增加任何价值.另请参阅:何时使用Vanilla JavaScript与jQuery？