Использование slideToggle () jQuery и запоминание настроек при обновлении страницы

Question

У меня есть следующий код, который slideToggle() div, в то же время отображая кнопку, которая позволяет вам slideToggle() назад и затем скрывается.

$(document).ready(function() {

$("#about-user-widget .hide-btn").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
});
//reverses the above action
$("#show-button").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
});
})

Вышеописанное прекрасно работает, однако, когда я обновляю страницу, она возвращается к значению по умолчанию. about-user-widget открыт, а видимость show-button скрыта.

Мой вопрос: как мне перезагрузить страницу, чтобы вспомнить мои настройки? Так, например, если кто-то щелкнул по Скрыть, и about-user-widget был скрыт, а show-button был виден. Как я могу сохранить этот параметр при обновлении страницы?

show-button по умолчанию скрыто.

<div class="pull-right" id="show-button" style="margin-bottom: 5px; font-size: 11px; color: #ddd; visibility: hidden;"><a href="#"><i class="fa fa-eye"></i> Show</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span></div>

Я знаю, что мне нужно как-то зафиксировать это в памяти (cookie, какое-то локальное хранилище), но, будучи новичком в jquery, я не уверен, как это реализовать.

Любая помощь будет оценена.

Answer 1

Сначала я не понимаю, зачем тебе две кнопки? Вы можете достичь этого с помощью одной кнопки. Согласно сохранению состояния div показано / скрыто

Вы можете использовать хранилище в файлах cookie или в предпочитаемом вами метноде.

Согласно куки; прочитайте следующее сообщение стека

Тогда вот, например, как вы можете попробовать: Я использовал этот плагин: https://github.com/js-cookie/js-cookie

$(document).ready(function() {
    var currentstate = Cookies.get('divstate');

    console.log('on refresh=' + currentstate);
    if (currentstate == 'open')
        $("#about-user-widget").show();
    else
        $("#about-user-widget").hide();


    $("#button").click(function() {
        $("#about-user-widget").slideToggle();
        var currentstate = Cookies.get('divstate');


        if (currentstate == 'close' || currentstate == undefined) {
            Cookies.set('divstate', 'open');
            console.log('when click');

        } else {
            Cookies.set('divstate', 'close');
            console.log('else');

        }

        console.log(Cookies.get('divstate'));
    });


});

часть HTML:

<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>

знать о совместимости плагина cookie с браузерами; Я тестировал с FireFox и работает.