通过 javascript 读取 cookie 时出错答案

【问题标题】：Having Errors with reading cookies via javascript通过 javascript 读取 cookie 时出错
【发布时间】：2017-07-03 12:59:31
【问题描述】：

当用户在页面上接受 cookie 时，我正在存储一个 cookie.... 一旦他们这样做，它将反过来阻止他们在访问时看到弹出窗口。

虽然当我在 body onload 中调用 read cookie 脚本时，它什么也没做。

cookie 的设置与我在 chrome 内容设置中看到的一样。

我尝试这样做的方法是在名为 cookieornot() 的外部 .js 中调用一个函数，该函数调用另一个函数并将返回值存储为变量

我的 cookieornot() 代码是：

  function cookieornot(){
    var result = readCookie("acceptcookies");
    if (result) {
      document.getElementById('acceptcookies').style.display = 'none';
    } else {
      document.getElementById('acceptcookies').style.display = 'block';
    }
  }

我的 readcookie() 代码是

function readCookie(name) {
  var nameEQ = 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,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

在我的 HTML 文件中，我有一个外部 .js 文件，其中包含两个函数引用

<script src="assets/js/ordersys.js"></script>

我的 HTML 部分是：（如果设置了 cookie，则应隐藏 DIV ID="acceptCookies"）

<body onload='cookieornot()'> <a href="#" class="scrollToTop w3-btn fa fa-chevron-circle-up fa-2x">
    </a>
    <!-- Modal -->
    <nav class="w3-sidenav w3-white w3-card-8 w3-animate-left w3-center" style="display:none;z-index:4;width:70px"

      id="mySidenav"> </nav>
    <!-- Overlay -->
    <div id="id02" class="w3-modal"> </div>
    <div id="id01" class="w3-modal"> </div>
    <div id="id03" class="w3-modal"> </div>
    <!-- Begin Code Here -->
    <div id="Header"></div>
    <div id="acceptCookies" class="w3-panel w3-blue w3-card-12" style="position:fixed;bottom:0px;right:0px;width:100%;">
      <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
      <h3>This Site Uses Cookies</h3>
      <p>We use cookies to help improve the function of this site. <a href=cookies.html>Learn More</a></p>
      <button class="w3-btn w3-round-xxlarge" onclick="acceptCookies()">I Accept Cookies</button><br><br>
    </div>

所以只是为了迭代，正确设置了 cookie：

名称：acceptcookies 内容：真实域名：.XXXXX.XXXX 小路： / 发送：任何类型的连接可访问脚本：是创建时间：2017 年 2 月 14 日，星期二，下午 5:30:47 过期：2018 年 2 月 14 日星期三下午 5:30:47

但是如果像预期的那样设置了 acceptcookies cookie，则此代码不会隐藏 div。

我可以从 body onload 切换到这里吗：

<script type="text/javascript">
        $(document).ready(function() {
        $('#mySidenav').load('assets/static_html/navbar_links.html');
        $('#Header').load('assets/static_html/header_on.html');
        $('#Footer').load('assets/static_html/footer.html');
        $('#id02').load('assets/static_html/email_modal.html');
        $('#id01').load('assets/static_html/phone_modal.html');

        $(window).scroll(function(){
          if ($(this).scrollTop() > 100) {
          $('.scrollToTop').fadeIn();
          } else {
          $('.scrollToTop').fadeOut();
          }
        });
        //Click event to scroll to top
        $('.scrollToTop').click(function(){
          $('html, body').animate({scrollTop : 0},800);
          return false;
        });
      });
    </script>

如果是这样，我该怎么做？

【问题讨论】：

Having Errors with reading cookies via javascript - 我们需要猜测错误是什么吗？
acceptcookies 与acceptCookies 不同
由于在这种情况下仅客户端需要 cookie 数据，因此请考虑使用 LocalStorage。 (developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 这使得 HTTP 请求更快，因为需要的数据更少，并且来自服务器的响应往往更易于缓存。它也比 cookie 更容易使用。

标签： javascript html cookies

【解决方案1】：

根据 readCookie 的编写方式，您可以更改 cookie 中的这一行，也可以不更改

if (result === "True") {

到

if(result) {

因为如果它没有找到 cookie，那么它将返回 null。只有当它为真时，cookie 才会被创建。希望这会有所帮助。

第 2 部分因为您已经有一个 jQuery.ready 事件，我们可以利用它在整个 DOM 加载后运行该函数。下面我已将函数调用添加到您帖子底部的 javascript 段中。您需要将其从正文 onload 中删除。

$(document).ready(function() {
    $('#mySidenav').load('assets/static_html/navbar_links.html');
    $('#Header').load('assets/static_html/header_on.html');
    $('#Footer').load('assets/static_html/footer.html');
    $('#id02').load('assets/static_html/email_modal.html');
    $('#id01').load('assets/static_html/phone_modal.html');

    $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
      } else {
      $('.scrollToTop').fadeOut();
      }
    });
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
    });

    cookieornot();  // Function added here.
  });

【讨论】：

它没有解决问题，但它的代码更短，所以我非常感谢您的输入
您是否尝试将一些 console.logs 添加到脚本中？您知道它是否遵循您期望的工作流程吗？
控制台日志显示无法在cookieornot()的第3行设置null的属性样式
Uncaught TypeError: Cannot set property 'style' of null at cookieornot (cookieornot.js:4) at onload ((index):46) index 最终成为标签
所以调用functio时dom元素不存在。在脚本标签而不是 onload 中尝试在页面底部调用 cookieornot 函数。如果其他方法不起作用，也可以尝试将 onload='cookieornot()' 更改为 onload='cookieornot'。

【解决方案2】：

我必须从外部 javascript 中删除 cookieornot() 函数，然后将其放在正文底部的标签中，现在一切看起来都很好。我不肯定为什么我必须这样做......

我仍然调用 cookieornot() 但现在它可以工作了。

【讨论】：