javascript - 选择更改时设置 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() {});
    }
})

我不确定我是否遗漏了一些简单的东西，但此时任何帮助使其正常工作的帮助将不胜感激。

Answer 1

使用 ES6，{[key]: value} 将创建 key 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() {});
})