CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Ratan Paul
Ratan Paul

Reputation: 492

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.

Upvotes: 0

Views: 1243

Answers (1)

Xan
Xan

Reputation: 77492

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.

Upvotes: 5

Related Questions