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

Question

我有一个基本的下拉选项列表 - 单击选项时，它会显示某个 div（现在我添加要显示和隐藏的类） - 我让它工作，但我必须存储所选选项，以便在页面刷新选项在用户更改之前仍处于锁定状态。我可以用一些饼干之类的吗？我对这个“像我 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;
}