Storing the toggle state of div with Jquery cookie?

Question

I am using Bootstrap Sb-Admin Template, and I want to use jquery cookie to remember the toggle state of my nav-bar.

The problem is when the page is reloaded the toggle state is forgotten. I would like to use the js-cookie to remember the last toggle state (collapsed or not). How do I use this cookie to remember the state?

 // Toggle the side navigation $("#sidenavToggler").click(function(e) { e.preventDefault(); $("body").toggleClass("sidenav-toggled"); $(".navbar-sidenav .nav-link-collapse").addClass("collapsed"); $(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show"); }); // Force the toggled class to be removed when a collapsible nav link is clicked $(".navbar-sidenav .nav-link-collapse").click(function(e) { e.preventDefault(); $("body").removeClass("sidenav-toggled"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <!-- Navigation--> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav"> <a class="navbar-brand" href="/">START <b>Q</b>UANTUM</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav navbar-sidenav" id="exampleAccordion"> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard"> <a class="nav-link" href="/?page_id=1"> <i class="fa fa-fw fa-dashboard"></i> <span class="nav-link-text">Dashboard</span> </a> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard"> <a class="nav-link" href="/social/?page_id=2"> <i class="fa fa-fw fa-share-square-o"></i> <span class="nav-link-text">Social Book</span> </a> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts"> <a class="nav-link" href="/attendance/?page_id=3" title="See Everything About Your Attendance"> <i class="fa fa-fw fa-area-chart"></i> <span class="nav-link-text">Attendance</span> </a> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables"> <a class="nav-link" href="/attendance/leave-data.php?page_id=4" title="Know about your leaves"> <i class="fa fa-fw fa-table"></i> <span class="nav-link-text">Leave / Day Off</span> </a> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Menu Levels"> <a class="nav-link" href="/payroll/?page_id=5" data-parent="#exampleAccordion"> <i class="fa fa-fw fa-money"></i> <span class="nav-link-text">Payroll</span> </a> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components"> <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents" data-parent="#exampleAccordion"> <i class="fa fa-fw fa-sitemap"></i> <span class="nav-link-text">Subordinates</span> </a> <ul class="sidenav-second-level collapse" id="collapseComponents"> <li> <a href="/subordinates/pendency.php?page_id=6">Approval</a> </li> <li> <a href="/subordinates/report_to_me.php?page_id=7">Under You</a> </li> </ul> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Example Pages"> <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion"> <i class="fa fa-fw fa-wrench"></i> <span class="nav-link-text">Settings</span> </a> <ul class="sidenav-second-level collapse" id="collapseExamplePages"> <li> <a href="/settings/profile.php?page_id=8">General Profile</a> </li> <li> <a href="/settings/settings.php?page_id=9">Security Settings</a> </li> <li> <a href="blank.html">Blank Page</a> </li> </ul> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Link"> <a class="nav-link" href="/reports/?page_id=10"> <i class="fa fa-fw fa-file"></i> <span class="nav-link-text">Reports</span> </a> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="HR-ADMIN Special Panel"> <a class="nav-link special" href="/settings/hr-admin.php?page_id=11"> <i class="fa fa-fw fa-link"></i> <span class="nav-link-text">HR - ADMIN</span> </a> </li> <li class="nav-item" data-toggle="tooltip" data-placement="right" title="HR-ADMIN Special Panel"> <a class="nav-link special" href="/control/?page_id=11"> <i class="fa fa-cogs" aria-hidden="true"></i>&nbsp; <span class="nav-link-text">Configuration</span> </a> </li> </ul> <ul class="navbar-nav sidenav-toggler"> <li class="nav-item"> <a class="nav-link text-center" id="sidenavToggler"> <i class="fa fa-fw fa-angle-left"></i> </a> </li> </ul> </div> </nav> 

How to remember the toogle state ?

Answer 1

So. You have some toggles and you could use localStorage to save their values. Depending of their amount you should save or one value or object that contains few values for each toggle. Then, you need to save to localStorage either by button or onChange. While page is loading you need to retrieve data.

There is an example for you https://codepen.io/CrUsH20/pen/aEWPKe?editors=1010

In case of multiple toggle needed save you just should organize gathering of data, convert it into object and JSON then. And retrieve data with converting JSON. There is an example of that case https://codepen.io/CrUsH20/pen/oBXaJR in Russian, though.

<label>Numer 1
    <input onclick="update()" name="test" value="1" type="radio">
</label>
<label>Numer 2
    <input onclick="update()" name="test" value="2" type="radio">
</label>
<label>Numer 3
    <input onclick="update()" name="test" value="3" type="radio">
</label>
<button onclick="save()">Save</button>

JS

let current = null;
window.onload = () => {
    let checked = localStorage.getItem("checked") || 1;
    console.log('It works!\n\n'+checked);
    if (checked) {
        document.querySelector('input[value="'+checked+'"]').checked = true;
}
    current = document.querySelector('input:checked').value;
}

function update() {
    current = document.querySelector('input:checked').value;
    console.log(current);
}

function save() {
    localStorage.setItem("checked", current);
}

Answer 2

You should use the localStorage . Example:

 localStorage.setItem('toggled', 'true'); 

To get the state back - even after page reloading -, you can use:

 localStorage.getItem('toggled'); // true 

Why localStorage?

Cookies and local storage serve different purposes. Cookies are primarily for reading server-side, local storage can only be read by the client-side. So the question is, in your app, who needs this data — the client or the server?

See this post.

Since you need the toggle state for rendering purposes, you will want to use localStorage.