如何检测用户是否浏览了我的网站的第一页？

Question

如果用户是第一次访问网站，我希望在我的网站上执行一些动画效果。我已经找到了使用localStorage来判断是否为“首次访问者”的代码，但还不清楚如何实现。

- Naemy

---

你所说的“第一页”是什么意思？你是指网站的主页吗？如果是在主页上，那么只需在主页上添加动画脚本即可。 - HaBo

把 JavaScript 放在网站的第一页怎么样？ - whastupduck

@HaBo 我认为他的意思是“你第一次访问我的网站”... 再读一遍，也许他的意思是你第一次访问他的网站那个时候？ - Gary

@HaBo 我的意思是指当访客第一次进入网站时，不一定是主页。 - Naemy

Answer 1

演示链接

您可以使用cookie或localStorage。假设您有以下HTML代码：

<div id="first">
    Welcome Visitor
</div>

<p>This is my website.</p>

我们将第一个元素的 `display` 属性设置为 `none`。这样它就永远不会显示出来。

#first {
    display: none;
}

然后我们进行首次检查。如果是第一次，我们会展示该元素（并可能对其执行一些动画）：

// this is the first time
if (! localStorage.noFirstVisit) {
    // show the element
    // and do the animation you want
    document.getElementById('first').style.display = 'block';

    // check this flag for escaping this if block next time
    localStorage.noFirstVisit = "1";
}

- user1823761

---

我同意并推荐您的解决方案，即使我使用 true 而不是 "1"。 - Niki Romagnoli

太棒了！顺便说一下，要了解更多关于HTML5的“localStorage”/“sessionStorage”，请访问w3schools.com。 - Pedro Ferreira

不要将display设置为block来使内容出现。none的相反值是initial！ - Martin

Answer 2

我会这样做。这里不需要cookie。只需检查 document.referrer 是否包含您的域名。如果没有，访问者只是来到您的域名而没有进一步浏览其他页面。

if(document.referrer.indexOf("yourdomain.com")==-1) {
 //first pageview of the session
}

如果页面引用信息（document.referrer）丢失了，您还可以设置一个cookie。

- Sebastian Pospischil

---

window.location.hostname 可以用于： if(document.referrer.indexOf(window.location.hostname)==-1) {} - sebastian.i

Answer 3

当访问者访问您的网站时，请设置一个cookie来指示他们已经访问过。每次加载页面时，检查该cookie是否存在。如果存在，则用户以前已经访问过您的网站。如果不存在，则可能是他的第一次访问...或者他们从浏览器中删除了您的cookie。

因此，如果这是我的第一次访问，则不应该有cookie，并且您应该播放动画。

- Joseph

---

如果用户在您的网站上禁用了cookie，那么您的动画将在每个页面上播放，并可能会让他们感到烦恼而离开您的网站。这个问题可能存在于跟踪首次访问的任何方法中。+1 - doppelgreener

将此设置为永不过期的 cookie。 - ChaseTheSun

我的答案仅针对每个窗口或选项卡，但避免了这些缺点。这个解决方案更实用，适用于现代浏览器和普通用户，但我想指出，我的解决方案允许跨浏览器解决方案，除非用户完全禁用了JavaScript，并且可以与此答案结合使用（如果可用）存储为cookie，以及本地存储，至少作为检查当前页面是否允许如果cookie或本地数据不存在，则在设置之前，并且还可以用于通知系统未设置cookie或数据。 - Brett Weber

问题在于，如果访问者关闭网站然后重新打开网站，动画将无法播放。 - Naemy

@Naemy 不一定..如果您要使用Cookie，将Cookie的过期时间设置为应用程序过期时间应该可以解决这个问题。至于本地存储，如果您希望每次用户重新打开网站时都执行此操作，那么会有点混乱，但是可以在window.onbeforeunload上将该标志设置为false，并根据我的答案进行重置，以确保在用户退出页面或关闭浏览器时将其设置为false。不是100％确定，但我相当肯定该事件仍在关闭浏览器时运行，因此可以实现。 - Brett Weber

Answer 4

我提供一段示例代码，供 @Joseph the Dreamer 参考。 创建并存储 Cookie。

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

获取Cookie的值

function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
  {
  c_start = c_value.indexOf(c_name + "=");
  }
if (c_start == -1)
  {
  c_value = null;
  }
else
  {
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
  if (c_end == -1)
  {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

查看使用Javascript的Cookie

- HaBo

Answer 5

假设您的意思是在此窗口中查看的第一页：

   if (location.referrer == location.href)
   {
      // the page was opened in a new window or tab and accessed directly
   }
   else if (location.referrer.indexOf(location.hostname) == -1) 
   {    
      // The page before this one was not a page on this site
   }

- Brett Weber

---

能否通过在此选项卡中查看的第一页来完成它？ - Naemy

是的，我更改了我的答案以使其更清晰一些，我没有仔细关注。第一个 if 语句将捕获查看的页面是否为标签页或新窗口中的第一个页面，否则就会捕获引用方是否来自不同的主机。希望这可以帮助！ - Brett Weber

Answer 6

在我看来，我认为最好使用数据库来跟踪这些操作。 使用本地存储或者cookie是特定于浏览器的。一旦用户更换浏览器，该功能就必须重新开始。然而，使用数据库可以实现持久性。 以下是你可以在数据库中做的事情。

• 创建一个名为first_timers的表。
• 添加一个名为user_email的列。
• 在用户登录时，检查用户的电子邮件是否在表中。
• 如果是，则用户不是第一次登录；如果不是，则用户是第一次登录。 每次成功登录后，都将用户电子邮件添加到表中。

- Adjetey Octavius