JS通过Cookie判断页面是否为首次打开-前端开发

下面是JS通过Cookie判断页面是否为首次打开的完整攻略。

下面是JS通过Cookie判断页面是否为首次打开的完整攻略。

一、什么是Cookie
Cookie是一种小型文本文件，可以被存储在客户端浏览器中，由服务器发送给浏览器，然后再下次浏览同一网站时发送给服务器。Cookie通常用于识别用户。

二、使用Cookie实现页面首次打开判断
我们可以利用Cookie的特性，将判断页面是否为首次打开的标志放入Cookie中，在Cookie未过期之前，就可以认定用户是第一次访问该网站。

首先可以判断页面是否存在特定名字的Cookie，如果存在则表明不是第一次访问，反之则是。

if(!document.cookie.match(/visited=(.*);?/)){
  alert('欢迎访问我们的网站！');
}

将是否第一次访问的标志存储到Cookie中，设置Cookie的过期时间为一定时间，如一天、一周等。

if(!document.cookie.match(/visited=(.*);?/)){
  // 这是第一次访问
  document.cookie = "visited=true; max-age=" + 24 * 3600; // 设置Cookie过期时间为一天
}else{
  // 不是第一次访问
}

三、示例说明
下面分别给出两个示例，以更加清晰地展示如何通过Cookie判断页面是否为首次打开。

示例一：网页弹窗欢迎语

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>欢迎访问我们的网站</title>
</head>
<body>
  <script>
    if(!document.cookie.match(/visited=(.*);?/)){
      alert('欢迎访问我们的网站！');
      document.cookie = "visited=true; max-age=" + 24 * 3600; // 设置Cookie过期时间为一天
    }
  </script>
</body>
</html>

当用户第一次访问该网站时，会出现一个弹窗欢迎语。再次访问时则不会出现弹窗。

示例二：显示不同的欢迎语

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>欢迎访问我们的网站</title>
</head>
<body>
  <div id="welcome">
    <!-- 如果是首次访问，则显示次等文字 -->
    <p id="first-visit">欢迎首次访问我们的网站！</p>
    <!-- 如果不是首次访问，则显示次等文字 -->
    <p id="return-visit">欢迎再次访问我们的网站！</p>
  </div>
  <script>
    if(!document.cookie.match(/visited=(.*);?/)){
      // 这是第一次访问
      document.getElementById('first-visit').style.display = 'block';
      document.cookie = "visited=true; max-age=" + 24 * 3600; // 设置Cookie过期时间为一天
    }else{
      // 不是第一次访问
      document.getElementById('return-visit').style.display = 'block';
    }
  </script>
</body>
</html>

当用户第一次访问该网站时，会显示欢迎首次访问的文字。再次访问时则会显示欢迎再次访问的文字。

以上就是JS通过Cookie判断页面是否为首次打开的完整攻略，希望对你有帮助。