Question

我想使用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'});
   });
     }
});

感谢您的帮助！

Answer 1

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

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)});

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

Answer 2

感谢您的回复。我终于通过改变我的原始代码得到了一些工作，如下所示：

$(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'});
      });
    }

  });

从localStorage迁移到chrome.storage

2 个答案: