cookie只执行一次

发表于   |   分类于

最近在做CDC十周年官网项目的时候，设计师提出了一个需求：
“把banner上的文字和背景分离，当打开页面的时候背景是立即出现的，而文字是慢慢淡入的动画效果。并且这个效果只执行一次，刷新这个页面或者跳到其他页面再次进入这个页面时，不再执行这个动画效果。”

当时我自己的思路是这样子的：第一次进入到这个页面时，判断是否有这个cookie，如果没有，就执行动画，并给浏览器写入cookie；当再次进入此页面，浏览器读到此cookie，就不再执行动画。但是测试的时候却发现有一个问题：由于cookie并不是页面的，而是整个站点的，也就是说，如果先进入的是本站点的其他页面，cookie就已经写入了浏览器中，所以再进入该页面，动画就不再执行了。

后来查阅了一些资料，解决了此问题。以下代码cookie只执行某事一次：

1
2
3
4
5
if (document.cookie.replace(/(?:(?:^|.*;\s*)someCookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
		alert("Do something here!");  // 此处是写你要执行的代码
		document.cookie = "someCookieName=true; expires=有效期; path=/";  // expires后面是cookie的有效期
	}
}

我在项目中的代码：

1
2
3
4
5
6
7
8
if (document.cookie.replace(/(?:(?:^|.*;\s*)banner\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
	$('.about-banner-text').fadeIn(2500);
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+1);
	document.cookie = "banner=true;expires='+ oDate +'path=/";
} else{
	$('.about-banner-text').show();
}

最终上线效果：http://cdc.tencent.com/about/


参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

—— end —— 注：水平有限，难免有误，如有错误欢迎指出！