Веб-всплывающее окно не будет отображаться после реализации куки через JavaScript

Question

Мне недавно дали решение проверить, показывалось ли всплывающее окно, а затем показывать его только один раз, используя куки. Но после внедрения куки всплывающее окно больше не отображается. Я погуглил проблему и попытался найти решение, но из-за недостатка знаний по этому вопросу мне было трудно понять проблему и решить ее.

Это код, который я использую, я внедрил использование файлов cookie и считаю, что они должны работать, но всплывающее окно не работает

function setCookie(cname,cvalue) {
  document.cookie = cname + "=" + cvalue;
}

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("ageverification");
  if (user != "") {
    return null;
  } else {
    var overlay = $('<div id="overlay"></div>');
    overlay.show();
    overlay.appendTo(document.body);
    $('.popup').show();
    $('.close').click(function() {
      $('.popup').hide();
      overlay.appendTo(document.body).remove();
      return false;
      user = true;      
      setCookie("ageverification", user);
    });
  }
}

function goBack() {
  window.history.go(-2);
}

<div class='popup'>
  <div class='cnt223'>
  <h1>Important Notice</h1>
  <p>
    You must be over 18 to Purchase products on this website!
    <br/>
    <br/>
    <a href='' class='close' style="color:green">I Am Over 18</a>
    <a href='' class='goBack()' style="color:red">I Am Not</a>
  </p>
  </div>
</div>

Answer 1

Я применил некоторые изменения в вашем коде, и теперь он должен работать.

В качестве резюме я применил следующие изменения:

• удален мертвый код из checkCookie;
• упрощен код для getCookie;
• исключил оверлейный div (который ничего не делал: он был просто создан пустым, подключен к DOM, а затем удален из него);
• изменил "всплывающее окно" с класса на идентификатор;
• уточнил строки выбора.

Чтобы улучшить функцию getCookie, я убрал лишний цикл и несколько подстрок. Вы можете получить тот же результат более аккуратно, используя метод обрезки (который исключает предшествующий и завершающий пробелы в строке) и разделяя файл cookie на "=".

Чтобы улучшить checkCookie, я удалил некоторый мертвый код (который не мог работать, потому что он был после оператора return), некоторый избыточный (который объявлял переменные для значений, необходимых только один раз) и явно бесполезный тег div. Кроме того, я изменил строки селектора, чтобы явно указывать на узел «a» внутри всплывающего окна, и добавил вызов метода protectDefault (). Эта последняя часть (изменение строк селектора и вызов метода protectDefault) была той, которая решала проблему.

function setCookie(cname,cvalue) {
  document.cookie = cname + "=" + cvalue;
}

function getCookie(cname) {
    var ca = decodeURIComponent(document.cookie).split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim().split('=');
        if (cname == c[0] && c.length > 1) {
            return c[1];
        }
    }
    return "";
}

function checkCookie() {
  if (getCookie("ageverification") == ""){
        $('#popup').show();
        $('#popup a.close').click(function (event) {
            event.preventDefault();
            $('#popup').hide();
            setCookie("ageverification", 'true');
        });
        $('#popup a.goBack').click(function ( event ) {
            event.preventDefault();
            goBack();
        });
    } else {
        return null;
    }
}

function goBack() {
  window.history.go(-2);
}

<div id='popup'>
  <div class='cnt223'>
  <h1>Important Notice</h1>
  <p>
    You must be over 18 to Purchase products on this website!
    <br/>
    <br/>
    <a href='' class='close' style="color:green">I Am Over 18</a>
    <a href='' class='goBack()' style="color:red">I Am Not</a>
  </p>
  </div>
</div>