Record session with javascript using cookie and a button

Question

Record session with javascript using cookie and a button

Navigation

#1 by (4 votes)
#2 by (3 votes)

5

Hello, I put up a banner, where I need it when the user enters the site and clicks the GOT IT button it disappears and when the user re-enters the site or uploads another link does not appear anymore. Disappear I got it, but save the user with cookie no, I found an example (below) but I did not understand the implementation !!!

NOTE: Remembering never expires

COOKIE

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

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

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

// EDIT
// Attaching to a button click (jQuery 1.7+) and set cookie
$("#idOfYourButton").on("click", function () {
$.cookie('the_cookie', 'the_value', { expires: 7 });
 });

// Attaching to a button click (jQuery < 1.7) and set cookie
$("#idOfYourButton").click(function () {
    $.cookie('the_cookie', 'the_value', { expires: 7 });
});

HTML

<div class="gotit">
    <div>
        <p>We use cookies in order to improve your browsing experience on sugarcane.org, not to collect personal information. By continuing to use the site, you agree that it is OK. <a href="https://sugarcane.org/privacy-policy">Read about our privacy policy.</a></p>
        <a href="#" title="GOT IT">GOT IT</a>
    </div>
</div>

JAVASCRIPT

<script>
$(document).ready(function(){
  $(".gotit A").click(function(){
    $(".gotit").fadeToggle("slow");
  });
});
</script>

javascript cookies session

asked by anonymous 18.12.2018 / 16:49

2 answers

Radar effect with CSS How to make a Submenu in Action Bar?

score 4 · Answer 1

You can use localStorage which is a type of cookie and set how many hours the banner will not be displayed by clicking the link to close it.

You need to hide the banner in the CSS as it will appear (or not) in the cookie check:

.gotit{
   display: none;
}

And the JavaScript code:

$(document).ready(function(){

   // atribui o LS a uma vaviável
   var cookie = localStorage.getItem("banner");

   // verifica o cookie
   criaCookie();

   $(".gotit A").click(function(){
      $(".gotit").fadeToggle("slow");
      criaCookie(true);
   });

   function criaCookie(a){
      // pega a data atual
      var data = new Date();

      // variável para guardar a data atual
      var data_atual = data.valueOf();

      // adiciona 168 horas (7 dias) à data atual
      var data_pos = data.setHours(data.getHours()+168);

      if(a){
         // cria/redefine o LS com a data +168 horas
         localStorage.setItem("banner", data_pos);
      }else if(cookie < data_atual){
         // verifica se o LS é menor do que a data atual
         // ou se o LS for inexistente e mostra o banner
         $(".gotit").show();

      }

   }

});

If you want a cookie with no time limit

The localStorage is infinite by default, that is, once it is created, it is only removed if the user removes it from the browser or by the localStorage.removeItem("banner") method.

The option below is when you click GOT IT, the banner no longer appears in the browser where the cookie was created:

$(document).ready(function(){

   // atribui o LS a uma vaviável
   var cookie = localStorage.getItem("banner");

   // verifica o cookie
   criaCookie();

   $(".gotit A").click(function(){
      $(".gotit").fadeToggle("slow");
      criaCookie(true);
   });

   function criaCookie(a){

      if(a){
         // cria o LS
         localStorage.setItem("banner", null);
      }else if(!cookie){
         $(".gotit").show();
      }

   }

});

score 3 · Answer 2

No jquery cookie plugin functional example

$(document).ready(function(){

  if (document.cookie.indexOf("the_cookie3=") <=0) {
      $(".gotit").css('display', 'flex') ;
      //$('#gotit').show();
  }

  $(".gotit A").click(function(){
      $(".gotit").fadeToggle("slow");

        if (document.cookie.indexOf("the_cookie3=") <= 0) {
           alert("O cookie não existe vou criar");

           var date = new Date();

          //expira em 7 dias
          //date.setTime(date.getTime()+(7*24*60*60*1000));

          //expira em 30 segundos para usar como teste
          date.setTime(date.getTime()+(30*1000));

          var expires = "; expires="+date.toGMTString();
          document.cookie = "the_cookie3=the_value"+expires+"; path=/"; 

         }
  });
});

HTML put a div

<div class="gotit" style="display:none">