Question

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

在选项页面上，我有3个复选框。选中/取消选中其中一个复选框后，使用 chrome.storage.sync.set（）将该复选框的值保存到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

你有两个主要问题：

chrome.storage.sync.get是异步的，而jQuery.fn.prop(propertyName, function(index, oldPropertyValue) )中的函数必须同步返回所需的值。
storage.set({name:'checked'}, ...);将创建一个名为“name”的属性，其值为“checked”， not 一个属性，其名称在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在这里没有增加任何价值。另见：When to use Vanilla JavaScript vs. jQuery?

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

1 个答案: