2

我想使用 chrome.storage API 来保存我的用户的设置，而不是我的 Chrome 扩展程序中的 localStorage。

目前我的 options.js（带有 localStorage 和 JSON）文件如下所示：

$(function(){ //jQuery Ready

// INIT
$("#notifysav").hide();

// STORAGE
if(localStorage['options']){
    var o = JSON.parse(localStorage['options']);
    $("#option1").attr('checked', o.option1);
            $("#option2").attr('checked', o.option2);
    .... [list of options]
}

// Save Button Click event
 $("#save").live('click', function(){
    localStorage['options'] = JSON.stringify({
        "option1":$("#option1").attr('checked'),
        "option2":$("#option2").attr('checked'),
        .... [list of options]
    });
            // notification
    $("#notifysav").fadeIn("slow").delay(2000).fadeOut("slow");
            // reload to apply changes
    chrome.extension.sendRequest({action: 'reload'});
});

});// #jQuery ready

我的问题是如何将我当前的代码转换为使用 chrome.storage API。据我了解，我将应用这些更改：

$(function(){

// INIT
var storage = chrome.storage.sync;
$("#notifysav").hide();

// Load Options
loadOptions();

// Save Button Click Event
$("#save").live('click',function(){ saveOptions(); });

function loadOptions() {
     storage.get(         /* Something */           )
}


 function saveOptions() {

 var option1 = $("#option1").attr('checked');
 var option2 = $("#option2").attr('checked');

  storage.set({"option1":option1,"option2":option2}, function() {
   // Notification
   $("#notifysav").fadeIn("slow").delay(2000).fadeOut("slow");
   // Reload Event to apply changes
   chrome.extension.sendRequest({action: 'reload'});
   });
     }
});

谢谢你的帮助！

4

2 回答 2

4

如果我理解正确，您的主要问题是如何从存储中检索数据。这是可以做的：

chrome.storage.local.get(null, function(all){console.log(all)});

将返回一个对象，其中包含存储在存储中的所有键和值，在您的情况下，它将输出：

Object {option1: "value1", option2: "value2"}

您也可以只获得其中一个键：

chrome.storage.local.get("optionkey", function(all){console.log(all)});

或一组键：

chrome.storage.local.get(["opt1", "opt2"], function(all){console.log(all)});

在任何情况下，您都可以通过键名访问回调中的数据。

于 2012-12-29T18:30:10.947 回答
0

感谢您的回复。我终于设法通过更改我的原始代码来获得一些工作，如下所示：

$(function(){

 // INIT
 const storage = chrome.storage.sync;
 var options = new Array(); 

 $("#notifysav").hide();

 loadOptions();

 // STORAGE

  // Save Button Click event
  $("#save").live('click', function(){ saveOptions(); });

function loadOptions() {
  storage.get('options', function(o) { 

     $("#option1").attr('checked', o.options[0]);
     $("#option2").attr('checked', o.options[1]);
     ...
    });
 }

function saveOptions() {
     options[0] = $("#option1").prop('checked');
     options[1] = $("#option2").prop('checked');
     ...

//console.log(options);

     storage.set({'options':options},function(){
       $("#notifysav").fadeIn("slow").delay(2000).fadeOut("slow");
       chrome.extension.sendRequest({action: 'reload'});
      });
    }

  });
于 2012-12-29T18:45:13.943 回答