Есть ли способ сохранить событие нажатия на состояние переключения с локальным / сессионным хранилищем, используя jquery

Question

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

<section class="floating-cta"> 
  <div class="qq-float-cta">
    <a href="#" class="cta-callnow">
        <div class="cta-top"><h3>Call now on 012 345 6789</h3></div>
        <p>For an accurate, immediate response </p>
    </a>
    <a href="#" class="cta-getquote">
        <div class="cta-bottom"><h3>Get your quote</h3></div>
        <p>Guaranteed response in 10 minutes within business hours.</p>
    </a>
  </div>
</section>
<i class="fa fa-times-circle-o"></i>

<script>
        $('.fa-times-circle-o').click(function(){
            $('.floating-cta').fadeToggle("slow");
            $("i",this).toggleClass("fa fa-times-circle-o fa fa-commenting")
    });
</script>

Я ожидаю, что когда пользователь закрывает раздел, он должен оставаться закрытым, когда он / она переходит на другую страницу, и снова открыть его, если он / онахочет отобразить его, снова щелкнув по значку.

Answer 1

Вы должны использовать cookies вместо.

Примерно так:

<script>
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }    
        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
        $('.fa-times-circle-o').click(function(){
            $('.floating-cta').fadeToggle("slow");
            $("i",this).toggleClass("fa fa-times-circle-o fa fa-commenting");
            setCookie('hide_popup', '1');
        });
        if(getCookie('hide_popup') == '1'){
            $('.floating-cta').hide();
        }
</script>