Как я могу выбрать div для показа и хранения в виде cookie или localalstorage?

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;
}