Javascript 用于多个选择选项下拉列表的本地存储

我有多个选择选项下拉列表，希望在用户选择后使用本地存储来保存用户的选择。这是HTML的一个示例：

<div class="sel_container">
    <select onchange="saveChoice()" id="select_color" class="test">
        <option value="">Choose color</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
    </select>
    <select id="select_type" class="test" onchange="saveChoice()">
        <option value="">Choose size</option>
        <option value="small">small</option>
        <option value="medium">medium</option>
    </select> 
</div>

我是javascript新手，在读了一些书之后，我似乎需要对JSON进行字符串化，但我真的对它的语法感到困惑。我试过使用这个，但它不起作用：

var obj = {
    "#select_color": this.value,
    "#select_type": this.value
}
var stringifyObj = JSON.stringify(obj);

---

非常感谢您的帮助！谢谢

您不需要为此专门使用对象或JSON。您可以做的是通过使代码更通用来改进代码，使其适用于

select

的任何实例

您已经给了他们两个

.test

类，因此您可以通过该类进行选择。然后，您可以在本地存储中设置由

选择

的

id

键入的值，该值可以在页面加载时检索。试试这个

$('.test').change(function() {
    localStorage.setItem(this.id, this.value);
}).val(function() {
    return localStorage.getItem(this.id)
});

---

这在上下文中是什么？它是否在更改功能中运行？谢谢Rory！现在，如果第二个下拉菜单是从文本文件中提取数据，这会变得更复杂吗？

$('.test').change(function() {
    localStorage.setItem(this.id, this.value);
}).val(function() {
    return localStorage.getItem(this.id)
});