如何从Chrome扩展的存储API访问多个键

我有2个输入文本框的用户名和密码。还有一个选择一些价值。现在我想要一个用户添加这些值，我试图使用Chrome存储API保存这些值。如何从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); 

     });

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

来源

2016-10-27 Ratan Paul

这就是你的代码所做的。您存储在'用户名'中，但读取'username1'等等。 – wOxxOm

wOxxOm的含义是：通过JS语法将'{key：value}'解释为'{'key'：value}'。如果你想专门使用*变量*'键'，你需要构造对象或使用ES6计算属性。 – Xan

@wOxxOm如果你看到。我每次增加计数'var username ='username'+ countTotalRecords;' –

你的“保存”部分不会做你认为它的作用。

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

来源

2016-10-27 14:39:04 Xan

真棒的人。 .. –

如何从Chrome扩展的存储API访问多个键

回答

相关问题