Сохранить выбранное меню скрыть / показать - PullRequest
Новая
       7

Сохранить выбранное меню скрыть / показать

0 голосов
/ 17 мая 2018

Я хочу, чтобы мои пользователи могли выбирать, хотят ли они всегда показывать или скрывать боковое меню с какими-то флажками.

Таким образом, мой код является основной функцией - показывать и скрывать.Но как я не могу сохранить это?Где мне сохранить выбор (настройку) в кеше?

Пожалуйста, кто-нибудь может мне помочь? 

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

1 Ответ

0 голосов
/ 17 мая 2018

Вы можете сохранить его в куки, например, так: 

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

...