Ratan Ratan - 1 month ago 10
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;

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


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

});


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

Xan Xan
Answer

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
  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
});

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.