js-cookie实现欢迎窗口1年记忆功能失败求排查，需原生JS方案

一、JS-Cookie代码问题排查 #

1. 第二个代码块的致命错误 #

你在第二个代码块的页面初始化逻辑里，把Cookies.get写成了Cookie.get（少了末尾的s），这会直接导致控制台抛出Cookie is not defined的错误，整个判断逻辑完全失效。修复后即可正常运行。

2. 第一个代码块的潜在问题 #

第一个代码块的逻辑本身是正确的，但可能因为以下原因导致功能异常：

• 本地文件环境限制：如果直接用file://协议打开本地HTML文件，浏览器会限制Cookie存储，需要在HTTP服务器环境下测试（比如用Node.js的http-server、XAMPP等）。
• Cookie路径问题：JS-Cookie默认将Cookie的路径设置为当前页面路径，如果你的页面在子目录下，可能在其他页面无法读取到Cookie。可以手动指定路径为根目录：

  Cookies.set("show", "on", {
    expires: 365,
    path: '/'
  });
  

修复后的JS-Cookie完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tips {
      display: inline-block;
      padding: 30px;
      border: 1px solid #222;
    }
  </style>
</head>
<body>
  <div class="tips" id="js-tips">
    <p>hello world!</p>
    <button id="btn">i see</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.0/js.cookie.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $("#btn").on("click", function() {
      Cookies.set("show", "on", {
        expires: 365,
        path: '/' // 指定根路径，确保全站可读取
      });
      $("#js-tips").hide();
    });

    $(document).ready(function() {
      let tips = Cookies.get("show");
      if (tips === "on") {
        $("#js-tips").hide();
      } else {
        $("#js-tips").show();
      }
    });
  </script>
</body>
</html>

二、原生JS实现方案 #

不需要依赖任何库，直接用浏览器原生的Cookie API实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tips {
      display: inline-block;
      padding: 30px;
      border: 1px solid #222;
    }
  </style>
</head>
<body>
  <div class="tips" id="js-tips">
    <p>hello world!</p>
    <button id="btn">i see</button>
  </div>
  <script>
    // 设置Cookie的工具函数
    function setCookie(name, value, days) {
      let expires = "";
      if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    // 获取Cookie的工具函数
    function getCookie(name) {
      let nameEQ = name + "=";
      let ca = document.cookie.split(';');
      for(let i=0;i < ca.length;i++) {
        let 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;
    }

    // 页面初始化逻辑
    document.addEventListener('DOMContentLoaded', function() {
      const tipsEl = document.getElementById('js-tips');
      const btnEl = document.getElementById('btn');
      
      // 检查Cookie，决定是否显示提示框
      let hasSeen = getCookie('show_tips');
      if (hasSeen === 'on') {
        tipsEl.style.display = 'none';
      } else {
        tipsEl.style.display = 'inline-block';
      }

      // 按钮点击事件
      btnEl.addEventListener('click', function() {
        setCookie('show_tips', 'on', 365);
        tipsEl.style.display = 'none';
      });
    });
  </script>
</body>
</html>

原生方案说明 #

• setCookie函数：负责设置Cookie，包含名称、值、有效期，同时指定根路径确保全站可用。
• getCookie函数：遍历浏览器的Cookie字符串，解析出目标Cookie的值。
• 通过DOMContentLoaded事件确保DOM加载完成后再执行逻辑，替代jQuery的ready方法。

内容的提问来源于stack exchange，提问作者AWEI