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

Posted 2023-05-09

【中文标题】如何选择要显示和存储为 cookie 或 localstorage 的 div？

【英文标题】：How can I choose the div to show and store as cookie or localstorage?

【发布时间】：2019-10-01 10:47:32

【问题描述】：

我有一个基本的下拉选项列表 - 单击选项时，它会显示某个 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');
        



    );
);

【参考方案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;

【讨论】：

嘿 Lalji，感谢您的回答。我只是想知道 .box 应该是什么？

选择器工作得很好，但它没有存储选项。它在新页面上恢复为默认（流派）