Google chrome extension 从localStorage移动到chrome.storage

我想使用chrome.storage API来保存用户的设置，而不是在我的chrome扩展中保存本地存储

当前我的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'});
   });
     }
});

---

谢谢你的帮助

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

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

---

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

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

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

---

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

谢谢您的回复。我最终通过如下方式更改了我的原始代码，实现了一些功能：

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

  });

---

谢谢你的回复。我最终通过如下方式更改了我的原始代码，实现了一些功能：

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

  });