将chrome扩展选项保存到chrome.storage？
我正在制作一个带有options.html页面的Chrome扩展程序。
在选项页面上，我有3个复选框。 选中/取消选中其中一个复选框后，使用chrome.storage.sync.set（）将该复选框的值保存到chrome.storage或从chrome.storage中删除。 但是一旦使用chrome.storage.sync.get（）保存数据，我似乎无法检索数据。
这是我的代码：
options.html：
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中最好的，我还在学习，所以请原谅我的错误。
你有两个主要问题：
-
chrome.storage.sync.get是异步的，而jQuery.fn.prop(propertyName, function(index, oldPropertyValue) )必须同步返回所需的值。 -
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？