Сохранить состояние меню с помощью JQuery

Ответ 1

Как люди говорят в благодарностях, вы можете использовать html 5 веб-хранилище.

У вас есть 2 типа:
- localStorage - хранит данные без истечения срока действия

- sessionStorage - сохраняет данные за один сеанс

как установить:
localStorage.setItem("name", "value");

Как получить значение
localStorage.getItem("name");

Итак, теперь вы можете сделать простую проверку:

if (localStorage.getItem("toggle") === null) {
    //hide or show menu by default
    //do not forget to set a htlm5 cookie
}else{
   if(localStorage.getItem("toggle") == "yes"){
     //code when menu is visible
   }else{
     //code when menu is hidden
   }
}

Дополнительная информация здесь

Ответ 2

Используйте скрытое поле. Используйте JS, чтобы установить это скрытое значение поля, когда панель открыта или закрыта, и чтобы проверить скрытое поле на pageload. Пример -

В вашем JS я использую одну функцию, чтобы установить, какие панели открыты/закрыты, а второй - для их размещения. Этот пример основан на наличии нескольких панелей на вашей странице, но вы можете быстро изменить его, чтобы обрабатывать только одну панель, если это необходимо.

function init() {
    if ($("#hdnOpenPanels").val()) {
        $(".fixPanels").click();
    }
}
// Ensures that the correct panels are open on postback
$(".checkPanels").click(function () {
    var checkPanel1= $("#Panel1").hasClass("in");
    var checkPanel2 = $("#Panel2").hasClass("in");
    var checkPanel3 = $("#Panel3").hasClass("in");

    $("#hdnOpenPanels").val(checkPanel1 + "|" + checkPanel2 + "|" + checkPanel3);
});

$(".fixPanels").click(function () {
    if ($("#hdnOpenPanels").val().split('|')[0] === "true") {
        $("#Panel1").collapse('show');
    } else {
        $("#Panel1").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[1] === "true") {
        $("#Panel2").collapse('show');
    } else {
        $("#Panel2").collapse('hide');
    }

    if ($("#hdnOpenPanels").val().split('|')[2] === "true") {
        $("#Panel3").collapse('show');
    } else {
        $("#Panel3").collapse('hide');
    }
});

Теперь у вас есть два простых класса, доступных для добавления к любым элементам, которые потребуют, чтобы страница знала, какие панели открыты (.checkPanels), а также "исправить", какие панели должны быть открыты (.fixPanels). Если у вас есть модалы на странице, они должны будут "fixPanels", когда они будут закрыты (хотя, возможно, не было обратной передачи).

На вашем коде:

Добавьте это в свой PageLoad:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["sPanels"] != null)
        {
            hdnOpenPanels.Value = Session["sPanels"].ToString();
            Session.Remove("sPanels");
        }

        if (IsPostBack){...}
        else {...}
    }

Наконец, при любых функциях кода, которые будут вызывать обратную связь, затрагивающие панели, добавьте эту строку в нижней части функции (-ов):

Session["sPanels"] = hdnOpenPanels.Value;

Ответ 3

Существует несколько способов сделать это, включая локальное хранилище, файлы cookie, параметры URL, фрагменты привязки и серверную память.

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

Если вам нужно упорствовать против одного экземпляра браузера, независимо от пользователя, вы можете использовать клиентское решение, такое как localStorage (для сохранения в сеансах браузера) sessionStorage (для сохранения в одном сеансе браузера) или файлов cookie (что может также можно настроить).

Например, вот решение, которое использует localStorage для сохранения состояния переключения между перезагрузками страниц и сеансами браузера.

Этот код не запускается в фрагменте SO, поэтому см. эту скрипту для демонстрации.

Javascript

var menuStateKey = "menu.toggle_nav.state";
$(document).ready(function() {
    var $nav = $("nav");

    var setInitialMenuState = function() {
        // Note: This retrieves a String, not a Boolean.
        var state = localStorage.getItem(menuStateKey) === 'true';
        setNavDisplayState(state);
    };

    var toggleNav = function() {
        var state = $nav.is(':visible');
        state = !state;
        localStorage.setItem(menuStateKey, state);
        setNavDisplayState(state);
    };

    var setNavDisplayState = function(state) {
        if (state) {
            $nav.show();
        } else {
            $nav.hide();
        }
    };

    $("#toggle_nav").click(toggleNav);

    setInitialMenuState();
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>I am the nav</nav>
<a href="#" id="toggle_nav" class="sidebar-toggle" data-toggle="offcanvas" role="button">Toggle</a>

Ответ 4

Вы можете сохранить состояние переключения в объекте localStorage.

// Check browser support
if (typeof(Storage) != "undefined") {
    // Store
    localStorage.setItem("toggleState", value);
    // Retrieve
    localStorage.getItem("toggleState");
} else {
    "Sorry, your browser does not support Web Storage...";
}

Отъезд Локальное хранилище - погружение в HTML5

Для этого доступны плагины JQuery.

$.localStorage;
storage=$.localStorage;
storage.set('foo','value');
storage.get('foo');

Подробнее читайте в JQuery Storage API.

Приветствия!

Ответ 5

Как объясняют другие, мы можем использовать localStorage (HTML5), иначе мы можем использовать файлы cookie

Обратитесь к этой статье о том, как сохранить данные с помощью файлов cookie.

Поскольку для этой реализации требуется меньше данных для хранения в cookie. Использование cookie будет хорошим подходом для вашей реализации.

Ответ 6

Вы можете выполнить команду

$.prototype._toggle = $.prototype.toggle;
$.prototype.toggle = function() { 
// save to localStorage
$.prototype._toggle.call(this) 
}

И напишите код, который использует localStorage для запуска переключения