Bootstrap Sidebar: State als Cookie speichern und bei Reload wiederherstellen?

[FrazeColder]

Moin zusammen,

ich nutze für meine Webseite ein HTML Template namens Metronic. Eine Demo davon findet ihr hier:
https://keenthemes.com/metronic/preview/?page=index&demo=default

Nun würde ich allerdings gerne irgendwie speichern, wenn ein User das Sidebar Menü einklappt oder ausklappt... Damit eben der User beim neu laden der Webseite nicht ständig wieder das Menü einklappen muss.. könnte auf Dauer nervig werden.. Mir ist auch bewusst, dass ich das irgendwie beim User Lokal speichern muss. Halt entweder per Cookie oder Session..

Jedenfalls habe ich zu meinem Problem bisher nur das hier gefunden:
https://stackoverflow.com/questions...rap-collapse-state-on-page-refresh-navigation

Leider kann ich allerdings damit nicht all so viel anfangen und denke auch nicht das mein Code bisher in die richtige Richtung geht oder richtig ist..

<script>
    var last=$.cookie('menuToggled');
    console.log(last);

    if (last!=null) {
        //remove default collapse settings
        $("#page-sidebar-menu-ul").removeClass('page-sidebar-menu-closed');
        //show the last visible group
        $("#"+last).collapse("show");
    }

    $("#page-sidebar-menu").bind('shown', function() {
        $.cookie('menuToggled', "page-sidebar-menu")
    });
</script>

Die ID "page-sidebar-menu" ist auf der verlinkten Demo Seite oben die ID "m_ver_menu" und die ID "page-sidebar-menu-ul" ist auf der verlinkten Seite oben das UL Element nach dem Element mit der ID "m_ver_menu".

Würde mich sehr über weitere Hilfe Freuen.
Mit freundlichen Grüßen und Vielen Dank!

 

[BeBur]

Hast du die jquery-cookie-lib eingebunden?
Hast du die Installationsanleitung auf github gelesen? (spoiler: Die Stack Overflow Antwort enthält einen Fehler).
PS.: (und verweist außerdem auf ein veraltetes repo)

 

[Tourgott]

Einfach per Javascript eine Klasse für .hide bzw. .show hinzufügen und lokal beim Nutzer speichern.
Würde ich allerdings über localStorage machen.

 

[Joshinator]

Würde es eher über den sessionStorage lösen. Dann hast du den Status der Sidebar auf die Tabs isoliert.
Im Prinzip das gleiche wie localStorage nur flüchtig.

Im Prinzip musst du beim Klick dann nur was mit in den Storage schreiben und beim Laden der Seite gucken welche Klassen du entfernen/setzen musst.
Könntest auch per JavaScript einen Klick auf das Element faken.

 

[FrazeColder]

Wie man das löst ist am Ende ja egal. Meine Frage ist hier eher, spreche ich überhaupt die richtigen Elemente an?

Schaut euch mal bitte die Demo Seite an und sagt mir, ob ich die richtigen Elemente anspreche.. Denn bisher weiß ich das noch nicht.. Und falls ja, wieso ist der Code von Stackoverflow falsch?

 

[BeBur]

Schaut euch mal bitte die Demo Seite an und sagt mir, ob ich die richtigen Elemente anspreche.. Denn bisher weiß ich das noch nicht.

Sowas kannst du am besten und sehr leicht mithilfe der Console herausfinden. Die Selectors kannst du da auch abrufen/ansprechen und sofort sehen, ob du die gewünschten Komponenten selektierst.
https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console