如何选择 div 显示和存储为 cookie 或 localstorage？

Question

我有一个基本的下拉选项列表 - 单击选项时它会显示某个 div（现在我添加 class 来显示和隐藏） - 我可以使用它但我必须存储所选选项，以便在页面刷新时该选项仍处于锁定状态，直到用户更改它。我可以用一些饼干什么的吗？我对此很陌生 "Explain like I'm 5 ;)" 感谢任何帮助。谢谢！

选择器：

    <li>
       <select id="song-gmt-selector">
                <option value="genres">Genres</option>
                <option value="moods">Moods</option>
                <option value="themes">Themes</option>
                <option value="instruments">Instruments</option>
            </select>
        </li>

Jquery 我发现：

  $(document).ready(function(){

    $('#song-gmt-selector').on('change', function() {
        if ( this.value == 'genres')
        {
            $(".genres_s").addClass('show-gmt');
        }
        else
        {
            $(".genres_s").removeClass('show-gmt');
        }
        if ( this.value == 'moods')
        {
            $(".moods_s").addClass('show-gmt');
        }
        else
        {
            $(".moods_s").removeClass('show-gmt');
        }
        if ( this.value == 'themes')
        {
            $(".themes_s").addClass('show-gmt');
        }
        else
        {
            $(".themes_s").removeClass('show-gmt');
        }
        if ( this.value == 'themes')
        {
            $(".themes_s").addClass('show-gmt');
        }
        else
        {
            $(".themes_s").removeClass('show-gmt');
        }



    });
});

Answer 1

试试这个方法

$(document).ready(function () {
            var current = '';
            $('#song-gmt-selector').on('change', function () {
                current = $(this).val();
                console.log(current);
                $('.box').removeClass('show-gmt');
                $('.' + current + '_s').addClass('show-gmt');
                localStorage.setItem('current', current);
            });
            if (localStorage.getItem('current')) {
                $('#song-gmt-selector').val(localStorage.getItem('current'));
                $('.' + localStorage.getItem('current') + '_s').addClass('show-gmt');
            }
        });

HTML

<select id="song-gmt-selector">
    <option value="genres">Genres</option>
    <option value="moods">Moods</option>
    <option value="themes">Themes</option>
</select>

<div class="box genres_s">genres</div>
<div class="box moods_s">moods</div>
<div class="box themes_s">themes</div>

CSS

.box {
   display: none;
 }
.box.show-gmt {
   display: block;
}

如何选择 div 显示和存储为 cookie 或 localstorage？

How can I choose the div to show and store as cookie or localstorage?

jquery

html

jquery-selectors