Ratan Ratan - 1 year ago 129
Javascript Question

how to access multiple keys from chrome extension's storage api

I have 2 input textbox for username and password. And one picklist for some value. Now I want a user to add these values and I am trying to save those values using chrome storage API.

Now each time I am storing a variable as how many records added like counter.
for storing I am just using like this

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;

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

AND for retrieving I am trying like this way

var getItems = [];
for(var i = 1; i <10; i++){
var username = 'username'+i;
var password = 'password'+i;
var orgType = 'orgType'+i;
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]);


But I am not getting all the stored values. even I am not getting all the values in console log.

Xan Xan
Answer Source

Your "saving" part doesn't do what you think it does.

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

is syntactically equivalent to

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

So your variable username does not affect what the key name is.

A modern way to solve this is to use ES6 computed property names:

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

This construction will evaluate the expression inside [] to get the property name.

However, consider that chrome.storage allows for more than just a flat map of keys to strings. You can actually store an array (or another object) in there. It comes at a cost of requiring read-modify-write every time you change a value, but easier to work with.

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

// 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

If your data does not fit into sync storage quotas (8kb per key, that can be surprisingly small), consider using several keys (as you did before, but maybe in a more organized fashion) or local storage area.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download