なぜchrome.storage.localは最後のレコードのみを保存しますか？

Question

私はchrome.storage.localにデータを保存するChrome拡張機能を作成しています。ただし、最後のレコードデータのみを保存します。私は何が間違っているのか説明できますか？

Chromeブラウザで設定をリセットした後、localStorageが空であるため、通常のlocalStorageは不良です。

chrome.runtime.onMessage.addListener(function (request) { 
    if (request.type === 'setInLocalStorage') { 
     var key = request.key; 
     //alert(key); 

     chrome.storage.local.set({key: request.data},function() { 
      alert('data was saved'); 
     }); 

    } 
    return true; 
}); 
chrome.runtime.onMessage.addListener(function (request, sender, SendResponse) { 
    if (request.type === 'getFromStorage') { 
     chrome.storage.local.get(null, function (items) { 
      var allKeys = Object.keys(items); 
      if (allKeys.length != 0) { 
       for (var i = 0; i < allKeys.length; i++) { 
        alert(items[allKeys[i]]); 
        if (items[allKeys[i]] === request.value) { 
         SendResponse(true); 
        } else if (i === allKeys.length - 1) { 
         SendResponse(false); 
        } 
       } 
      } else { 
       SendResponse(false); 
      } 
     }); 
    } 
    return true; 
});  

Answer 1

のみ最後に保存された値は、storage.localに存在します。基本的には、chrome.storage.local.set()に電話をかけていると思われるオブジェクトを作成していません。

{'key': request.data} 

それは変数keyの値で代用していません。

{key: request.data} 

これは同等です：

あなたはObject literal/Object initializerとして使用しています。そのため、保存しようとするたびに、メッセージに渡すキー（つまり、request.key）ではなく、'key'というプロパティにデータを保存しています。

あなたは、オブジェクト初期化子内で直接computed property nameを使用することができますが、既に使用している：

{[key]: request.data} 

をこれがrequest.dataの値を割り当てるにプロパティとして使用されている変数keyの内容になります。あなたのコードになるだろう

：最初のオブジェクトを作成し、プロパティを設定することによって、

chrome.runtime.onMessage.addListener(function (request) { 
    if (request.type === 'setInLocalStorage') { 
     var key = request.key; 
     //alert(key); 

     chrome.storage.local.set({[key]: request.data},function() { //only this line changes 
      alert('data was saved'); 
     }); 
    } 
    return true; 
}); 

代わりに、あなたは同じことを行うことができますが、もう少し詳細な：

chrome.runtime.onMessage.addListener(function (request) { 
    if (request.type === 'setInLocalStorage') { 
     var setObject = {}; 
     setObject[request.key] = request.data; 
     //alert(key); 

     chrome.storage.local.set(setObject,function() { 
      alert('data was saved'); 
     }); 
    } 
    return true; 
}); 

Answer 2

あなたの問題はここにある：あなたが表記{key: value}を使用してオブジェクトを作成すると

var key = request.key; 
//alert(key); 

chrome.storage.local.set({key: request.data},function() { 
    alert('data was saved'); 
}); 

、キーは常に「キー」、およびないkeyという名前の変数の値です。

あなたは次のようにそれを行うことができます。

var data={}; 
data[request.key]=request.data; 
chrome.storage.local.set(data,function() { 
    alert('data was saved'); 
}); 

それとも、あなたの現在のコードに近い、その位置[]に（角括弧を使用して、配列を定義していない、定義するための有効な表記法であります与えられた変数の値などのキー）：あなたが繰り返しあなたはを呼び出すたびに上書きされるプロパティ'key'、にすべての値を格納するため

var key = request.key; 
//alert(key); 

chrome.storage.local.set({[key]: request.data},function() { 
    alert('data was saved'); 
});