使用 Cookie 重定向到启动页面(……但只重定向一次!)

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

cookiemonster

启动页面可能很烦人。 你知道那些……比如在你看到想要访问的页面之前,被迫观看一些广告。或者可能是你每次访问网站时都会自动重定向到的某个花哨的网站介绍。太好了。

在某些情况下,启动页面可能有用。假设你正在运营一个乐队的网站,并且他们发行了一张新专辑。你可能希望将访问者重定向到一个介绍新专辑的启动页面。这甚至可能受到乐队粉丝的欢迎,他们希望了解新专辑并有机会购买它。但是,如果他们第五次访问该网站并被重定向,他们肯定不会欢迎它。

让我们解决这个问题!

所需的功能

首先让我们明确所需的功能

用户之前访问过此网站吗?
:转到常规主页
:重定向到启动页面

如果答案为否,我们需要确保下次询问此问题时,答案为是。我们如何实现这种神奇的网络智能?借助互联网最美味的功能:cookie!

设置和获取 Cookie

在 Web 上处理 Cookie 的方法有很多,但正如我们在这里喜欢做的那样,让我们利用 jQuery 的强大功能。首先,我们需要在页面上包含 jQuery 库以及非常棒的 cookie 插件

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/cookie.js"></script>
<script type="text/javascript">
	$(function() {
		.... do stuff....
	});
</script>

因此,回顾我们所需的功能,我们需要为我们的主页编写类似以下内容

检查 Cookie。
找到 Cookie 了吗? 不执行任何操作。
没有 Cookie? 设置 Cookie,然后重定向到启动页面。

在 jQuery 中,看起来像这样

$(function() {
	var COOKIE_NAME = 'splash-page-cookie';
	$go = $.cookie(COOKIE_NAME);
	if ($go == null) {
		$.cookie(COOKIE_NAME, 'test', { path: '/', expires: 6 });
		window.location = "/splash.php"
	}
	else {
	}
});

其中的“6”是“Cookie 过期前的几天”,所以你可以根据需要使用它。

记住……

……能力越大,责任越大!