如何使用变量的值作为键名在 chrome 扩展中使用 chrome.storage？答案

【问题标题】：How to use chrome.storage in a chrome extension using a variable's value as the key name?如何使用变量的值作为键名在 chrome 扩展中使用 chrome.storage？
【发布时间】：2012-10-07 04:57:15
【问题描述】：

我正在尝试将 chrome 的本地存储/同步存储 (chrome.storage) 用于扩展，以存储数据条目，用于许多不同的条目。我似乎无法弄清楚它的正确语法。我只想将信息简单地存储为字符串。我已经搜索过，但找不到任何可行的方法。

这就是目前使用普通 localStorage 技术对我有用的方法：

    var imageName = "Red Cat 5";
    var myDescription = "A nice kitty";

    localStorage.setItem (imageName, myDescription);
    console.log(localStorage[imageName]);

这很有效，让我可以从现有变量中设置密钥。我怎样才能使用 chrome.storage.local.set 做到这一点？我一直在尝试这个没有任何成功：

    var imageName = "Red Cat 5";
    var myDescription = "A nice kitty";

    chrome.storage.local.set({imageName: myDescription}, function()
    {console.log('success?');});

    chrome.storage.local.set({imageName: myDescription}, function()
    {chrome.storage.local.get(imageName, function(r){console.log(r.imageName);});});

非常感谢任何帮助。谢谢！

-- 下面更新 -----

感谢代码的解释。我希望它可以帮助其他人。似乎很少有关于这样做的信息！你的回答帮助我想出了这个：

    var nameOne = "al";
    var nameTwo = "bob";
    var nameThree = "carl";
    var nameFour = "dan";

    var dataObj = {};

    dataObj[nameOne] = nameTwo;
    dataObj[nameThree] = nameFour;

    storage.set(dataObj);

    storage.get(dataObj, function(result)
    {
    console.log(result[nameOne]);
    console.log(result[nameThree]);
    });

【问题讨论】：

标签： google-chrome-extension local-storage

【解决方案1】：

使用命名对象，而不是匿名对象，并使用方括号设置成员变量：

var dataObj = {};
dataObj[imageName] = myDescription;
chrome.storage.local.set(dataObj, function() { /*...*/ });

这不是最优雅的代码，但它是唯一的方法。

在 ES6 中，一个稍微短一些的方法是使用带有动态属性名称的对象字面量：

chrome.storage.local.set({
    [imageName]: myDescription
}, function() { /*...*/ });

【讨论】：

您好，感谢您提供此信息。它使它更容易理解。在您的帮助下，我想出了一些似乎可以满足我需要的东西！有关示例，请参见上面的问题。
顺便说一句...是否可以在一个命令中使用您的答案中的三行代码，而无需功能部分？
您可以将它包装在像setlocalData(keyNameString, value, callback) 这样的函数中，它使用我发布的三行版本。除此之外，不是，我不这么认为。
@rich 对象文字只能有文字属性名称。在这里，我们需要一个可变命名的属性。假设您想要一个名为bazzle 的字面名称属性；您可以使用{bazzle:5} 或o = {}; o["bazzle"] = 5;。但是，如果你不知道你想要的属性的名称（即它存储在一个变量中），你只能做第二种情况o[stringWithPropertyName] = 5;。对象字面量无法使用变量作为属性名。即，{stringWithPropertyName:5} 将使用冒号左侧的文字字符串。
@onegrx 该函数是一个回调，在存储操作完成后运行。

【解决方案2】：

set 方法接受 对象项 和一个可选回调，get 接受 可选字符串或数组或对象键，如果您传递了第一个参数，你也必须传递第二个参数。

例子：

// To set 
chrome.storage.local.set({'testKey':'Test Value'});

// To get
chrome.storage.local.get('testKey', function(data){
  console.log(data); 
  // logs out "Object {testKey: "Test Value"}"
})

【讨论】：