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

Question

我有 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);

        });

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

Answer 1

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

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

在语法上等价于

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

所以你的变量username 不会影响键名是什么。

解决这个问题的现代方法是使用 ES6计算属性名称：

{
  ['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存储区域。