How can I save setting of my menu_toggle using cookie?

Question

I want to toggle my menu and save its settings in the cookie. Here is my Jquery code for toggle button:

My HTML

  <div class="nav toggle">
  <a id="menu_toggle"><i class="fa fa-bars"></i></a>
  </div>

My Code

 var $MENU_TOGGLE = $('#menu_toggle')
 $MENU_TOGGLE.on('click', function() {
    console.log('clicked - menu toggle');

    if ($BODY.hasClass('nav-md')) {
        $SIDEBAR_MENU.find('li.active ul').hide();
        $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
    } else {
        $SIDEBAR_MENU.find('li.active-sm ul').show();
        $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
    }

$BODY.toggleClass('nav-md nav-sm');

setContentHeight();
 });

It's need to be cookie? Maybe localStorage is the solution. Reference: https://developer.mozilla.org/pt-BR/docs/Web/API/Window/Window.localStorage — Rafael Gadotti Bachovas, Jul 06 '17 at 18:55
What's the issue here? Are you asking how to create a cookie with JavaScript? — Volem, Jul 06 '17 at 18:57
@RafaelGadottiBachovas yes I know. But I do not want to store it in my database. In that way, I have to check every time from the database that which setting current user has. — Alamzaib Farooq, Jul 06 '17 at 18:57
@AlamzaibFarooq LocalStorage is stored in the user memory and not in database. — Rafael Gadotti Bachovas, Jul 06 '17 at 18:59
localStorage.setItem('menuToogle', 1); localStorage.getItem('menuToogle'); — Rafael Gadotti Bachovas, Jul 06 '17 at 19:00
you want the returning user to find the toggle controls as he left them? if so you have to [create a cooky](https://www.w3schools.com/js/js_cookies.asp) store values that allow you to use a function that after reading the cooky (if it exists) then set the required class and run the rest of your code. — DIEGO CARRASCAL, Jul 06 '17 at 19:00
@RafaelGadottiBachovas Okay tell me a little how can I do that? I think cookie does the same thing. It also stores information on client side. — Alamzaib Farooq, Jul 06 '17 at 19:01
[This question](https://stackoverflow.com/questions/9948284/how-persistent-is-localstorage) may help you clarify.... — DIEGO CARRASCAL, Jul 06 '17 at 19:04
@AlamzaibFarooq When you toogle menu store value with localStorage.setItem('menuToogle', YOU_MENU_STATUS_HERE)... When you load new page get the value with localStorage.getItem('menuToogle') and show/hide your menu according to this value. — Rafael Gadotti Bachovas, Jul 06 '17 at 19:05
@AlamzaibFarooq localStorage will store the value in the user memory and you can access it to define if menu is closed or opened. — Rafael Gadotti Bachovas, Jul 06 '17 at 19:08
@RafaelGadottiBachovas Thank you very much. localStorage helped me! It is so simple to use. Thank you very much. — Alamzaib Farooq, Jul 06 '17 at 20:10
@RafaelGadottiBachovas See my answer to my own question. How I solved it. — Alamzaib Farooq, Jul 06 '17 at 20:15

score 3 · Accepted Answer · answered Jul 06 '17 at 20:14

I used localStorage to solve my problem. It's really simple and easy way to store setting locally. I add these two lines.

Here is my code:

 localStorage.setItem('Menu', 'Mini');

 localStorage.setItem('Menu', 'Larg');

Then I added script in my page like this:

<script>
if (localStorage.Menu === 'Mini') {
    $("body").addClass('nav-sm');

} else {
    $("body").addClass('nav-md');
}
</script>

score 0 · Answer 2 · answered Jul 06 '17 at 19:25

document.cookie = "togglesetting=John Doe; expires=Thu, 18 Dec 2017 12:00:00 UTC";

You can put your setting information into any key value pattern in the cookie.

My suggestion is to put a json there and read the togglesetting key from cookies than set your toogle menu appropriately

score 0 · Answer 3 · answered Jul 06 '17 at 19:56

I just wrote this earlier today for a website that I am building. My preferred method was to add a cookie check to the head. This adds a class to the html that you can attach styling to.

<script type="text/javascript">
  if (document.cookie.replace(/(?:(?:^|.*;\s*)hasClosedMenu\s*\=\s*([^;]*).*$)|^.*$/, "$1") == false) {
    document.documentElement.className += " menu-open "
  }
</script>

Below you will find the function that sets the cookie determining whether the menu is open or not.

$('.menu-toggle').on('click',function(){
  $('html').toggleClass('open-menu');
  if ($('html').hasClass('open-menu')){
    document.cookie = "hasClosedMenu=; max-age=0; domain="+window.location.hostname+"; path=/; ";
  } else {
    document.cookie = "hasClosedMenu=true; max-age=864000; domain="+window.location.hostname+"; path=/; ";
  }
});

I hope this helps.

How can I save setting of my menu_toggle using cookie?

3 Answers3