クロムエクステンションのストレージAPIから複数のキーにアクセスする方法

Question

ユーザー名とパスワードの入力用の2つのテキストボックスがあります。そして、ある価値のための一つの選択肢。今私は、これらの値を追加するユーザーをしたいと私はこれらの値をクロムストレージ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 
} 

はdoes not affect what the key name isusername

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

だからあなたの変数に構文的に等価です。

これを解決するために近代的な方法は、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ストレージクォータ（キーあたり8キロバイト、驚くほどに小さくすることができる）に収まる複数のキーを使用することを検討していない場合は

か localストレージエリア。