Как распознать установленный файл cookie

Question

У меня есть веб-сайт, над которым я работаю, с всплывающим окном проверки возраста.Я могу получить файл cookie для создания, но не могу получить код для распознавания файла cookie.По крайней мере, я так думаю.Я проверил куки в настройках браузера, поэтому я знаю, что он там есть.

Вот сайт: http://foh.mybigcommerce.com Код для просмотра: e0hpwrjo8x

   
    $(document).ready(function(){

        window.onload = function() {
           //checkCookie();
            var user=getCookie("age-verified");
            if (user != "") {
                $("#age-verify").addClass("hidden");
            }
        };

        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 "";
        }
//        function checkCookie() {
//            var user=getCookie("age-verified");
//            if (user != "") {
//                $("#age-verify").addClass("hidden");
//            }
//        }
//        

        var yesEl = document.getElementById('yes');
        var noEl = document.getElementById('no');

        yesEl.addEventListener('click', function(){
            document.cookie = 'age-verified; expires=1';
            $('#age-verify').addClass('hidden');
            function setCookie(cname,cvalue,exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays*1));
                var expires = "expires=" + d.toGMTString();
                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
            }
        });

        noEl.addEventListener('click', function() {
            $('#age-text').addClass('hiddenText');
            $('#under-age').removeClass('hiddenText');
            $('#yes').addClass('hiddenText');
        });

    });

#age-verify {
  position: fixed;
  z-index: 9997;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
#age-verify .window {
  position: absolute;
  z-index: 9998;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 250px;
  overflow: hidden;
  padding: 40px;
  margin-left: -200px;
  margin-top: -125px;
  background-color: #fff;
  border: 6px solid Red;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
#age-verify .window span {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
}
#age-verify .window span.title {
  color: Red;
  font-size: 24px;
}
#age-verify .window button {
  border: 0;
  margin: 0;
  padding: 0;
  width: 48%;
  height: 60px;
  color: #FFF;
  font-size: 18px;
  background-color: Red;
  margin-top: 20px;
  font-family: "Open Sans", sans-serif;
  transform: scale(1);
}
#age-verify .window button.back {
  display: block;
  float: none;
  margin: auto;
  background-color: #fff;
  color: Red !important;
  margin-top: 20px;
}
#age-verify .window button.yes {
  float: left;
}
#age-verify .window button.no {
  float: right;
}
#age-verify .window button:hover {
  transform: scale(1.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  background-color: #ff3333;
}
#age-verify .window .underBox {
  position: absolute;
  width: 400px;
  height: 250px;
  padding: 40px;
  top: 100%;
  left: 0;
  right: 0;
  background-color: Red;
  transition: 500ms;
  box-sizing: border-box;
}
#age-verify .window .underBox * {
  color: #FFF !important;
}
#age-verify.hidden {
  opacity: 0;
  visibility: hidden;
}
#age-verify.hidden .window {
  transform: scale(0.5);
}
#age-verify.under .window .underBox {
  top: 0%;
}
.hiddenText {
  display: none;
}   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript"></script>
<div id="age-verify">
  <div class="window">
    <div id="age-text">
      <span class="title">Are you over 18?</span>
      <span>You must be 18 to visit this website.</span>
    </div>
    <div id="under-age" class="hiddenText">
      <span class="title">Sorry!</span>
      <span>You need to be at least 18 to visit our website.</span>
    </div>
    <button id="yes" class="yes">Yes</button>
    <button id="no" class="no">No</button>
  </div>
</div>

Answer 1

Я понял это.После того, как все началось заново и я получил белую доску, я все заработал!Какое облегчение!

    //ONLOAD CHECK COOKIE
    $(function() {
        
        checkCookie();
        
    });
    
    //GET COOKIE
    function getCookie(cname) {
        console.log("inside get cookie");
        var name = cname;
        console.log(name);
        var ca = document.cookie.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 "";
    }

    //CHECK COOKIE
    function checkCookie() {
        console.log('inside check cookie');
        var user = getCookie("ageVerified=true");
        
        if (document.cookie.split(';').filter((item) => item.includes('ageVerified=')).length) {
            console.log('The cookie "ageVerified" exists');
            //HIDE AGE BOX
            $('#age-verify').addClass('hidden');
        } else {
            console.log('suck it');
        }
    }
    
    //VERIFIED AGE NOW CREATE COOKIE
    $('#overAge').click(function(){
        
        //HIDE AGE BOX
        $('#age-verify').addClass('hidden');
        //SET COOKIE
        document.cookie = "ageVerified=true;expires=1;path=/";
        console.log('old enough');
        console.log(document.cookie);
        
    });
    
    //UNDER AGE
    $('#underAge').click(function() {
        console.log('too young');
        //HIDE OR SHOW TEXT AND BTNS
        $('#age-text').addClass('hiddenText');
        $('#under-age').removeClass('hiddenText');
        $('#yes').addClass('hiddenText');
        $('#no').addClass('hiddenText');
    
    });
    
    //GO BACK
    $('#goBack').click(function() {
        
        //SEND USER BACK
        window.history.back();
        
    });

    #age-verify {
      position: fixed;
      z-index: 9997;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.8);
      transition: 500ms;
    }
    #age-verify .window {
      position: absolute;
      z-index: 9998;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 250px;
      overflow: hidden;
      padding: 40px;
      margin-left: -200px;
      margin-top: -125px;
      background-color: #fff;
      border: 6px solid Red;
      box-sizing: border-box;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      transition: 500ms;
    }
    #age-verify .window span {
      display: block;
      text-align: center;
      margin-bottom: 10px;
      font-family: "Open Sans", sans-serif;
      font-size: 17px;
    }
    #age-verify .window span.title {
      color: Red;
      font-size: 24px;
    }
    #age-verify .window button {
      border: 0;
      margin: 0;
      padding: 0;
      width: 48%;
      height: 60px;
      color: #FFF;
      font-size: 18px;
      background-color: Red;
      margin-top: 20px;
      font-family: "Open Sans", sans-serif;
      transform: scale(1);
      transition: .2s;
    }
    #age-verify .window button.back {
      display: block;
      float: none;
      margin: auto;
      background-color: #fff;
      color: Red !important;
      margin-top: 20px;
    }
    #age-verify .window button.yes {
      float: left;
    }
    #age-verify .window button.no {
      float: right;
    }
    #age-verify .window button:hover {
      transform: scale(1.1);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      background-color: #ff3333;
    }
    #age-verify .window .underBox {
      position: absolute;
      width: 400px;
      height: 250px;
      padding: 40px;
      top: 100%;
      left: 0;
      right: 0;
      background-color: Red;
      transition: 500ms;
      box-sizing: border-box;
    }
    #age-verify .window .underBox * {
      color: #FFF !important;
    }
    #age-verify.hidden {
      opacity: 0;
      visibility: hidden;
    }
    #age-verify.hidden .window {
      transform: scale(0.5);
    }
    #age-verify.under .window .underBox {
      top: 0%;
    }
    .hiddenText {
      display: none;
    } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript"></script>
    <div id="age-verify">
      <div class="window">
        <span class="title">Are you over 18?</span>
        <span>To visit our website, you must be 18 or older.</span>
        <div id="under-age" class="hiddenText underBox">
          <span class="title">Sorry!</span>
          <span>You need to be at least 18 to visit our website.</span>
          <button id="goBack" class="back">Go Back</button>
        </div>
        <button id="overAge" class="yes">Yes</button>
        <button id="underAge" class="no">No</button>
<!--
        <div class="underBox">
          <span class="title">Sorry!</span>
          <span>You need to be at least 18 to visit our website.</span>
          <button class="back">Go Back</button>
        </div>
-->
      </div>
    </div>

Answer 2

На самом деле вы не устанавливали значение cookie в вашем коде document.cookie = 'age-verified; expires=1';.Таким образом, в условии if, когда вы проверяете значение cookie, оно всегда черное, а ваше условие if становится if (user != "") { true.

Я внес некоторые изменения.Во-первых, я устанавливаю значение cookie 18 и скрываю проверку возраста по умолчанию, добавляя класс hidden в контейнер.Во-вторых, я проверяю, не является ли значение cookie не 18, то есть user !=== 18, что означает, что значение должно быть строкой.Если условие не выполнено, я показываю всплывающее окно подтверждения возраста.

$(document).ready(function(){

        window.onload = function() {
           //checkCookie();
            var user=getCookie("age-verified");
             if (user !== "18") {
                    $("#age-verify").removeClass("hidden");
             }
        };

        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 "";
        }
//        function checkCookie() {
//            var user=getCookie("age-verified");
//            if (user != "") {
//                $("#age-verify").addClass("hidden");
//            }
//        }
//        

        var yesEl = document.getElementById('yes');
        var noEl = document.getElementById('no');

        yesEl.addEventListener('click', function(){
            document.cookie = 'age-verified=18; expires=1';
            $('#age-verify').addClass('hidden');
            
        });

        noEl.addEventListener('click', function() {
            $('#age-text').addClass('hiddenText');
            $('#under-age').removeClass('hiddenText');
            $('#yes').addClass('hiddenText');
        });

    });

#age-verify {
  position: fixed;
  z-index: 9997;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
#age-verify .window {
  position: absolute;
  z-index: 9998;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 250px;
  overflow: hidden;
  padding: 40px;
  margin-left: -200px;
  margin-top: -125px;
  background-color: #fff;
  border: 6px solid Red;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
#age-verify .window span {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
}
#age-verify .window span.title {
  color: Red;
  font-size: 24px;
}
#age-verify .window button {
  border: 0;
  margin: 0;
  padding: 0;
  width: 48%;
  height: 60px;
  color: #FFF;
  font-size: 18px;
  background-color: Red;
  margin-top: 20px;
  font-family: "Open Sans", sans-serif;
  transform: scale(1);
}
#age-verify .window button.back {
  display: block;
  float: none;
  margin: auto;
  background-color: #fff;
  color: Red !important;
  margin-top: 20px;
}
#age-verify .window button.yes {
  float: left;
}
#age-verify .window button.no {
  float: right;
}
#age-verify .window button:hover {
  transform: scale(1.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  background-color: #ff3333;
}
#age-verify .window .underBox {
  position: absolute;
  width: 400px;
  height: 250px;
  padding: 40px;
  top: 100%;
  left: 0;
  right: 0;
  background-color: Red;
  transition: 500ms;
  box-sizing: border-box;
}
#age-verify .window .underBox * {
  color: #FFF !important;
}
#age-verify.hidden {
  opacity: 0;
  visibility: hidden;
}
#age-verify.hidden .window {
  transform: scale(0.5);
}
#age-verify.under .window .underBox {
  top: 0%;
}
.hiddenText {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript"></script>
<div id="age-verify" class="hidden">
  <div class="window">
    <div id="age-text">
      <span class="title">Are you over 18?</span>
      <span>You must be 18 to visit this website.</span>
    </div>
    <div id="under-age" class="hiddenText">
      <span class="title">Sorry!</span>
      <span>You need to be at least 18 to visit our website.</span>
    </div>
    <button id="yes" class="yes">Yes</button>
    <button id="no" class="no">No</button>
  </div>
</div>