jQuery развернуть / скрыть с помощью cookie

Question

У меня есть следующий код.Мне действительно нужен файл cookie, который запоминает текущее состояние div, даже если пользователь перезагружает страницу.Большое спасибо за вашу помощь!

jQuery(function(){
    jQuery(".menu i").hide();
    jQuery("#showmenu").click(function(){
        if(jQuery(".side-menu").width() > "87"){
            jQuery(".side-menu").animate({width: '-=205px'});
            jQuery(".main-section").animate({'margin-left': '-=205px'});
            jQuery(".logo").text("2");
            jQuery("span.text").hide();
            jQuery(".menu i").show();

        }
        else {
            jQuery(".side-menu").animate({width: '+=205px'});
            jQuery(".main-section").animate({'margin-left': '+=205px'});
            jQuery(".logo").text("1");
            jQuery("span.text").show("slow");
            jQuery(".menu i").hide();
        }

    });

});

И это div

 <div class="wrapper">
  <div class="side-menu">
    <div class="logo">
      Vi Dairy
    </div>
    <div class="menu">
      <ul>
        <li><a href="#"><i class="fa fa-home" style="font-size:15px;color:white;"></i><span class="text">test</span></a>
           <ul class="dropdown">
              <li><a href="#"><i class="fa fa-heart" style="font-size:15px;color:white;"></i><span class="text">test</span></a></li>
              <li><a href="#"><i class="fa fa-history" style="font-size:15px;color:white;" aria-hidden="true"></i><span class="text"> test</span></a></li>
              <li><a href="#"><i class="fa fa-thumbs-up" style="font-size:15px;color:white;" aria-hidden="true"></i><span class="text"> test</span></a></li>
              <li><a href="#"><i class="fa fa-star" style="font-size:15px;color:white;" aria-hidden="true"></i><span class="text"> test</span></a></li>
              <li><a href="#"><i class="fa fa-gears" style="font-size:15px;color:white;" aria-hidden="true"></i><span class="text"> test</span></a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

Answer 1

Используйте setCookie для создания Cookie и getCookie для получения значения.

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Пример JQuery

//To set a cookie
$.cookie('the_cookie', 'the_value');

//Create expiring cookie, 7 days from then:
$.cookie('the_cookie', 'the_value', { expires: 7 });

//Create expiring cookie, valid across entire page:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

//Read cookie
$.cookie('the_cookie'); // => 'the_value'
$.cookie('not_existing'); // => null

//Delete cookie by passing null as value:
$.cookie('the_cookie', null);

// Creating cookie with all availabl options
$.cookie('myCookie2', 'myValue2', { expires: 7, path: '/', domain: 'example.com', 
         secure: true, raw: true });

Answer 2

Использование LocalStorage .Если вы сохраните что-то в локальном хранилище, файл cookie исчезнет, ​​когда вы закроете браузер, и останется при обновлении страницы.