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

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 stringify，但我对此语法感到非常困惑。我尝试使用这个，但它不起作用:

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

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

Answer 1

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

您已经为它们提供了 .test 类，因此您可以通过该类进行选择。然后，您可以在 localstorage 中设置由 select 的 id 键控的值，该值可以在页面加载时检索。试试这个；

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

Working example