时间戳

首页 > 解决方案 > 保存选择的菜单隐藏/显示

javascript - 保存选择的菜单隐藏/显示

问题描述

我想让我的用户选择是否总是要显示或隐藏带有某种复选框的侧边菜单。

所以我的代码是基本功能，显示和隐藏。但是我怎么不能保存呢？我应该将选择（设置）保存在缓存中的哪里？

请问有人可以帮我吗？

function openNavLeft() {
    document.getElementById("SideNavLeft").style.width = "250px";
}

function closeNavLeft() {
    document.getElementById("SideNavLeft").style.width = "0";
}

<ul class="nav navbar-nav">
    <li><a onclick="openNavLeft()">Menu</a></li>
</ul>



<!--- Left Sidenav Content -->
<div id="SideNavLeft" class="sidenav sidenav_left">
    <div class="top-block-side-nav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNavLeft()">&times;</a>
    </div>


    <a href="#">>
        <div class="menu_element">
            <div class="nav_icon" id="x"></div>
            <p class="menu_title">My Employee</p>
        </div>
    </a>

    <a href="#">
        <div class="menu_element">
            <div class="nav_icon" id="icon_vacation"></div>
            <p class="menu_title">Vacation</p>
        </div>
    </a>

    <a href="#">>
        <div class="menu_element">
            <div class="nav_icon" id="x"></div>

            <p class="menu_title">Mis Envios</p>
        </div>
    </a>
    <a href="#">">
        <div class="menu_element">
            <div class="nav_icon" id="x"></div>
            <p class="menu_title"> Setting</p>
        </div>
    </a>
</div>
<!--- EndLeft Sidenav Content -->

标签： javascriptmenusave

解决方案

您可以像这样将其保存在cookie中

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
if(!getCookie('SideNavLeft'))
    setCookie('SideNavLeft', '250', 100) // sets cookie for 100 days to initial value of 250 ie vissible menu as most obvious default

function openNavLeft() {
    setCookie('SideNavLeft', '250', 100)
}

function closeNavLeft() {
    setCookie('SideNavLeft', '0', 100);
}
// then wherever in code you can set the style of menu like so:
document.getElementById("SideNavLeft").style.width = getCookie('SideNavLeft')+"px";

或者正如@Kurt 在对 localStorage 或 sessionStorage 的评论中提到的那样。您可以在此处阅读有关差异的信息，例如https://scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie

推荐阅读