如何为 chrome 扩展设置一个简单的动态变量到 chrome.storage.local.set？

Question

我有一个滑块，我希望能够将值设置到本地存储中，以便我可以在网页上动态使用该值。

我需要帮助的部分是chrome.storage.local.set(v);。

$('#slider').on('change', function () {
    var v = $(this).val();
    $( 'div').each(function () {
        this.style.setProperty( 'margin', '10px '+v+'px', 'important' );
    });
    chrome.storage.local.set(v);
});

这个变量工作得很好，我只需要能够将它保存到本地存储中以便我可以使用它。它在页面重新加载之前工作，所以我现在需要的是能够将它放入存储中，以便在重新加载该页面时保存值。

---

更新：这是你说的吗？

$('#slider').on('change', function () {
    var v = $(this).val();
    var theKeyForV = chrome.storage.local.get({"keyforv" : v}, 
    chrome.storage.local.set({"keyforv" : v}, 
    function(){ 
        // callback (what goes here?)
    });
    $( 'div').each(function () {
        this.style.setProperty( 'margin', '10px '+theKeyForV+'px', 'important' );
    });
});

Answer 1

你可以这样使用：

// Set
var dataObj = {};
dataObj["key1"] = "vaule1";
// dataObj["key2"] = "vaule2"; // if you want to set value more than one key.
chrome.storage.local.set(dataObj, function() {
  if(!chrome.runtime.lastError){
      // set storage value successfully.
  }
});

// Get
var dataObj = ["key1"];
// var dataObj = ["key1", "key2"]; // if you want to get value more than one key. 
chrome.storage.local.get(dataObj, function (callback){
   if(callback && callback["key1"]){
     // To Do: handle callback["key1"].
    }
});

// Remove
var dataObj = ["key1"];
// var dataObj = ["key1", "key2"]; // if you want to remove value more than one key.
chrome.storage.local.remove(dataObj, function(callback) {
   if(!chrome.runtime.lastError){
      // remove successfully.
  }
});

要了解更多信息，请参阅chrome.storage

Answer 2

您可能需要多注意api。 chrome.storage.local 的类型为StorageArea。因此，chrome.storage.local.set 的第一个（也是唯一一个强制的）参数是“一个对象，它让每个键/值对更新”。你只给出了该对象的后半部分。尝试： chrome.storage.local.set({"sidemargins":v});