選択変更時にChromeストレージを設定する

Question

現在、私はChrome拡張機能用の作業用コードブロックを持っていますが、自分自身を繰り返しているさまざまなコードブロックがあり、必要なコードを最小限に抑えることを検討しています。

document.getElementById('streamSelect').addEventListener('change', function() { 
    var t = document.getElementById("streamSelect").value; 
    chrome.storage.sync.set({ "streamSelect" : t }, function() {}); 
}, false) 

document.getElementById('volumeSlider').addEventListener('change', function() { 
    var u = document.getElementById("volumeSlider").value; 
    chrome.storage.sync.set({ "volumeSlider" : u }, function() {}); 
}, false) 

document.getElementById('currentSegment').addEventListener('change', function() { 
    var v = document.getElementById("currentSegment").value; 
    chrome.storage.sync.set({ "currentSegment" : v }, function() {}); 
}, false) 

document.getElementById('nowPlaying').addEventListener('change', function() { 
    var w = document.getElementById("nowPlaying").value; 
    chrome.storage.sync.set({ "nowPlaying" : w }, function() {}); 
}, false) 

document.getElementById('lastPlayed').addEventListener('change', function() { 
    var x = document.getElementById("lastPlayed").value; 
    chrome.storage.sync.set({ "lastPlayed" : x }, function() {}); 
}, false) 

document.getElementById('quickLinks').addEventListener('change', function() { 
    var y = document.getElementById("quickLinks").value; 
    chrome.storage.sync.set({ "quickLinks" : y }, function() {}); 
}, false) 

document.getElementById('desktopNotifications').addEventListener('change', function() { 
    var z = document.getElementById("desktopNotifications").value; 
    chrome.storage.sync.set({ "desktopNotifications" : z }, function() {}); 
}, false) 

結果として、HTML Select要素の変更をリッスンする小さなコードブロックを作成しようとしました。 Select要素に加えられた変更が正常にアクティブになり、Y変数とZ変数も正しく設定されますが、Chrome.Storage.Sync.Set行の実行が完了していないようです。

var setOptions = ["streamSelect", "volumeSlider", "currentSegment", "nowPlaying", "lastPlayed", "quickLinks", "desktopNotifications"] 

$("select").change(function() { 
    for(var i = 0; i < setOptions.length; i++) { 
     var Y = setOptions[i]; 
     var Z = document.getElementById(Y).value; 
     chrome.storage.sync.set({ Y : Z }, function() {}); 
    } 
}) 

私はこのためのシンプルな何かが欠けていた場合、私はわからないんだけど、この作業を取得するためにどのような援助がずっとこの時点でいただければ幸いです。 ES6で

Answer 1

、{[key]: value}キーkeyを作成します。

var key = "test"; 
var obj = {[key]: "value"}; // obj = {test: "value"} 

したがって、このような何かがうまくいくかもしれない：

$("select").change(function() { 
    var id = this.id; 
    var val = this.value; 
    chrome.storage.sync.set({[id]: val}, function() {}); 
}) 

あるいは、非ES6バージョン：

$("select").change(function() { 
    var obj = {}; 
    obj[this.id] = this.value; 
    chrome.storage.sync.set(obj, function() {}); 
})