Jquery 使用localstorage和复选框自定义菜单

我有一个带有开/关复选框的配置页面，我想控制菜单中的项目是否隐藏或显示

菜单部分的示例：

<ul class="accordion">
    <li id="whyReplace"><a href="#">header</a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em> sub1</a></li>
            <li><a href="#"><em>02</em> sub2</a></li>
            <li><a href="#"><em>03</em> sub3</a></li>
        </ul>
    </li>
</ul>

我需要知道如何将要隐藏（关闭）的复选框存储在localstorage中，循环遍历这些存储的变量，然后.hide（）；id与data-toggle-id匹配的菜单项。

这里是一个工作演示： 注意，它正在使用jQuery并运行

onDomReady

您还可以使用cookies而不是localstorage，然后在服务器端脚本上根据cookie值相应地设置隐藏/检查属性。这样，您就不会在元素隐藏之前看到它们的闪光，而JavaScript可能会出现这种情况

---

编辑：要使用引导开关，您需要使用更改事件而不是单击，因为单击的是开关而不是复选框

这里有另一种方法，使用一个数组，朋友可以帮我弄清楚

演示：

HTML：

<ul id="menu">
    <li id="list0">Widgets</li>
    <li id="list1">Gadgets</li>
</ul>

<h3>Toggle Menu's</h3>

<ul id="menu-toggles">
    <li>Widgets:
        <button type="button" id="toggle0" data-menuhead="list0" class="btn btn-primary menu-toggle" data-toggle="button">On</button>
    </li>
    <li>Gadgets:
        <button type="button" id="toggle1" data-menuhead="list1" class="btn btn-primary menu-toggle" data-toggle="button">On</button>
    </li>
</ul>

小部件
小工具

切换菜单的

小部件：
在…上

小工具：
在…上

JS：

var menu_storage_key = 'menu_items_off';
var menu_items_off = new Array();

if ('localStorage' in window && window['localStorage'] !== null) {
    var storage = window.localStorage;
}

$(document).ready(function() {
    $('.menu-toggle').click(function () {
        if ($(this).html() == 'On') {
            $(this).html('Off');
            if(menu_items_off.indexOf($(this).data('menuhead')) < 0) {
                menu_items_off.push($(this).data('menuhead'));
            }
        } else {
            $(this).html('On');
            $('#' + $(this).data('menuhead')).show();
            var new_array = new Array();
            if(menu_items_off.indexOf($(this).data('menuhead')) >= 0) {
                for (i=0; i < menu_items_off.length; i++) {
                    if(menu_items_off[i] != $(this).data('menuhead')) {
                        new_array.push(menu_items_off[i]);
                    }
                }
                menu_items_off = new_array;
            }
        }
        persist_data(menu_storage_key, menu_items_off);
        update_menu();
    });

    // running on document load
    load_menu_storage();
    update_menu();
    update_toggles();
});

function load_menu_storage() {
    // check to see if value exists
    if(storage.getItem(menu_storage_key) == null) {
        // if it doesn't exist, set it to empty array and return
        persist_data(menu_storage_key, new Array());
        return;
    }
    menu_items_off = get_data(menu_storage_key);
}

function update_menu() {
    // value exists, iterate through and set items off
    for (i=0; i < menu_items_off.length; i++) {
        $('#' + menu_items_off[i]).hide();
    } 
}

function update_toggles() {
    // value exists, iterate through and set items off
    for (i=0; i < menu_items_off.length; i++) {
        $('.menu-toggle').each(function() {
            if(menu_items_off[i] == $(this).attr('data-menuhead')) {
                $(this).html('Off');
                $(this).addClass('active');
            }
        });
    }
}

function persist_data(key, data) {
    storage.setItem(key, JSON.stringify(data));
}

function get_data(key) {
    return JSON.parse(storage.getItem(key));
}

var menu_storage_key='menu_items_off'；
变量菜单项关闭=新数组（）；
if（'localStorage'在窗口和窗口['localStorage']中）！==null）{
var storage=window.localStorage；
}
$（文档）.ready（函数（）{
$（'.menu toggle'）。单击（函数（）{
如果（$（this.html（）=='On'）{
$（this.html（'Off'）；
if（菜单项关闭.indexOf（$（this.data（'menuhead'））<0）{
菜单项按下（$（this.data（'menuhead'））；
}
}否则{
$（this.html（'On'）；
$（'#'+$（this.data（'menuhead'））.show（）；
var new_array=new array（）；
如果（菜单项关闭.indexOf（$（this.data（'menuhead'））>=0）{
对于（i=0；i

您能否明确说明您需要知道什么，以及您已经知道如何做？你的问题是如何基于localstorage变量隐藏页面加载中的元素吗？@michael这对我来说是新东西，所以如果有更好的方法，我愿意接受。是的，我想隐藏基于导航的localstorage变量中的元素，并使其持久化。我还有一个问题，我如何让它与引导开关on/off按钮一起工作？下面是一个JSFIDLE，它显示了我正在处理的问题：bootstrapSwitch似乎没有使用checked属性，而是为父div分配了一个开关打开或关闭的类。我不确定您是否已经了解了这一点，但看到了我编辑过的答案。这太棒了，正是我想要的，我迫不及待地想把这个设置好。谢谢你，迈克尔！一旦我得到足够的声誉，我会投票支持这个！

<ul id="menu">
    <li id="list0">Widgets</li>
    <li id="list1">Gadgets</li>
</ul>

<h3>Toggle Menu's</h3>

<ul id="menu-toggles">
    <li>Widgets:
        <button type="button" id="toggle0" data-menuhead="list0" class="btn btn-primary menu-toggle" data-toggle="button">On</button>
    </li>
    <li>Gadgets:
        <button type="button" id="toggle1" data-menuhead="list1" class="btn btn-primary menu-toggle" data-toggle="button">On</button>
    </li>
</ul>

var menu_storage_key = 'menu_items_off';
var menu_items_off = new Array();

if ('localStorage' in window && window['localStorage'] !== null) {
    var storage = window.localStorage;
}

$(document).ready(function() {
    $('.menu-toggle').click(function () {
        if ($(this).html() == 'On') {
            $(this).html('Off');
            if(menu_items_off.indexOf($(this).data('menuhead')) < 0) {
                menu_items_off.push($(this).data('menuhead'));
            }
        } else {
            $(this).html('On');
            $('#' + $(this).data('menuhead')).show();
            var new_array = new Array();
            if(menu_items_off.indexOf($(this).data('menuhead')) >= 0) {
                for (i=0; i < menu_items_off.length; i++) {
                    if(menu_items_off[i] != $(this).data('menuhead')) {
                        new_array.push(menu_items_off[i]);
                    }
                }
                menu_items_off = new_array;
            }
        }
        persist_data(menu_storage_key, menu_items_off);
        update_menu();
    });

    // running on document load
    load_menu_storage();
    update_menu();
    update_toggles();
});

function load_menu_storage() {
    // check to see if value exists
    if(storage.getItem(menu_storage_key) == null) {
        // if it doesn't exist, set it to empty array and return
        persist_data(menu_storage_key, new Array());
        return;
    }
    menu_items_off = get_data(menu_storage_key);
}

function update_menu() {
    // value exists, iterate through and set items off
    for (i=0; i < menu_items_off.length; i++) {
        $('#' + menu_items_off[i]).hide();
    } 
}

function update_toggles() {
    // value exists, iterate through and set items off
    for (i=0; i < menu_items_off.length; i++) {
        $('.menu-toggle').each(function() {
            if(menu_items_off[i] == $(this).attr('data-menuhead')) {
                $(this).html('Off');
                $(this).addClass('active');
            }
        });
    }
}

function persist_data(key, data) {
    storage.setItem(key, JSON.stringify(data));
}

function get_data(key) {
    return JSON.parse(storage.getItem(key));
}