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类，因此您可以选择它。然后，您可以在id的{{1}}键入localstorage中设置值，该值可以在页面加载时检索。试试这个;

select

Working example

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

1 个答案: