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

Question

我有多个选择选项下拉菜单，并希望在用户选择后使用本地存储来保存他们的选择。这是 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>

我使用了我发现的另一篇文章中的这段代码，它可以保存其中一个选择：

$(function() {
    $('#select_color').change(function() {
        localStorage.setItem('todoData', this.value);
    });
    if(localStorage.getItem('todoData')){
        $('#select_color').val(localStorage.getItem('todoData'));
    }
});

我是 javascript 新手，在阅读了一些内容之后，我似乎需要进行 JSON 字符串化，但我对它的语法感到非常困惑。我尝试使用它，但它不起作用：

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

非常感谢您对此的任何帮助！谢谢！

Answer 1

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

你已经给他们两个.test类，所以你可以选择。然后，您可以在由id 的select 键入的localstorage 中设置值，可以在页面加载时检索该值。试试这个；

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

Working example