如何从 chrome 扩展的存储 api 访问多个密钥答案

【问题标题】：how to access multiple keys from chrome extension's storage api如何从 chrome 扩展的存储 api 访问多个密钥
【发布时间】：2016-10-28 21:58:35
【问题描述】：

我有 2 个输入用户名和密码的文本框。还有一个具有一定价值的选择列表。现在我希望用户添加这些值，并且我正在尝试使用 chrome 存储 API 保存这些值。

现在每次我将变量存储为添加了多少条记录，例如计数器。用于存储我只是这样使用

 var skillsSelect = document.getElementById("orgTypeId");
 var selectedOrgType = skillsSelect.options[skillsSelect.selectedIndex].value;
 var countTotalRecords = totalRecordsVal +1;
 var username = 'username'+countTotalRecords;
 var password = 'password'+countTotalRecords;
 var orgType = 'orgType'+countTotalRecords;

        chrome.storage.sync.set({
                            username: $("#usernameid").val(), 
                            password: $("#passwordid").val(),
                            orgType: selectedOrgType,
                            'totalRecords':countTotalRecords
                            }, function(){
            alert('Success!');
        });

为了检索我正在尝试这样的方式

var getItems = [];
    for(var i = 1; i <10; i++){
        var username  = 'username'+i;
        var password  = 'password'+i;
        var orgType  = 'orgType'+i;
        getItems.push(username);
        getItems.push(password);
        getItems.push(orgType);
    }
    console.log('==========getItems======',getItems);
    chrome.storage.sync.get(getItems, function(items){
            var keys = Object.keys(items);
            for (var i = 0, end = keys.length; i < end; i++) {
                var key = keys[i];
                console.debug(key + ' = ' + items[key]);
            }
            console.log('------------data---',data);

        });

但我没有得到所有存储的值。即使我没有得到控制台日志中的所有值。

【问题讨论】：

这就是您的代码的作用。你存储在username，但读取username1等等。
wOxxOm的意思是：{key: value}被JS语法解释为{'key': value}。如果你想专门使用变量key，你需要构造对象或者使用ES6计算属性。
@wOxxOm 如果你看到 .我每次都在增加计数var username = 'username'+countTotalRecords;
@Xan 任何示例来指导如何解决问题

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

你的“储蓄”部分并没有像你想象的那样做。

{
  username: $("#usernameid").val(), 
  password: $("#passwordid").val(),
  orgType: selectedOrgType,
  'totalRecords': countTotalRecords
}

在语法上等价于

{
  'username': $("#usernameid").val(), 
  'password': $("#passwordid").val(),
  'orgType': selectedOrgType,
  'totalRecords': countTotalRecords
}

所以你的变量usernamedoes not affect what the key name is。

解决这个问题的现代方法是使用 ES6 computed property names:

{
  ['username' + countTotalRecords]: $("#usernameid").val(), 
  ['password' + countTotalRecords]: $("#passwordid").val(),
  ['orgType' + countTotalRecords]: selectedOrgType,
  'totalRecords': countTotalRecords
}

此构造将评估 [] 中的表达式以获取属性名称。

但是，请考虑chrome.storage 不仅仅允许将键映射到字符串。您实际上可以在其中存储一个数组（或另一个对象）。它的代价是每次更改值时都需要读取-修改-写入，但更易于使用。

// Adding (get -> modify (push) -> set)
chrome.storage.sync.get({records: []}, function(data) { // Default to empty array
  data.records.push({
    username: $("#usernameid").val(), 
    password: $("#passwordid").val(),
    orgType: selectedOrgType
  });
  chrome.storage.sync.set(data);
});

// Reading
chrome.storage.sync.get({records: []}, function(data) {
  // data.records is an array of record objects
  // data.records.length is, therefore, what totalRecords was before
});

如果您的数据不适合 sync 存储配额（每个密钥 8kb，这可能非常小），请考虑使用多个密钥（就像您以前那样，但可能以更有条理的方式）或 local 存储地区。

【讨论】：