JavaScript处理cookie_pagevisit.js-优快云博客

本文链接：https://blog.youkuaiyun.com/vampire_vivan/article/details/30105439

本文探讨如何在网页上动态展示新添加的内容，并通过建立cookie记录用户最近的访问时间，实现个性化展示与时间跟踪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考资料：《JavaScript基础教程第8版》

这篇博文里面有一些问题还没有解决，望知道解决方法的能教我下！谢谢了

代码基本上是根据原书上改的！最后的功能是--如果网页上一些内容是在访问者上次访问后添加的，那么就在这些内容行前添加“New！”图像（另外，添加了两行代码实现在页面底部位置显示用户最后一次登录的时间信息）

演示一下建立cookie的方法：

window.onload = initPage;

function initPage() {
	var now = new Date();
	var expireDate = new Date();
	expireDate.setMonth(expireDate.getMonth()+6);  //cookie过期时间
	
	document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString();
	
}

document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString();

这里就是写cookie的地方，cookieName=cookieValue;（必须有）

最后的那个JavaScript中本身有建立cookie的方法，在运行一次后，就会有cookie创建

参考资料中建立cookie的方法，在我电脑的360和chrome中不能成功！但在IE和Firefox中没有问题……（这是接下来要解决的一个问题）

下面是最终功能的HTML Code：

<!DOCTYPE html>
<html>
<head>
	<title>New for You</title>
	<link rel="stylesheet" href="script07.css">
	<script src="script07.js"></script>
</head>
<body>
	<p>Negrino and Smith's most recent books:</p>
	<p id="New-20140801"><a href="http://www.javascriptworld.com">JavaScript: Visual QuickStart Guide, 8<sup>th</sup> Edition</a></p>
	<p id="New-20100601"><a href="http://www.dreamweaverbook.com">Dreamweaver CS5: Visual QuickStart Guide</a></p><br /><br /><br /><br /> //别笑我
	<h6 id="lastlog"> </h6>  //这里添加了一个标题用来显示最后的登录时间
</body>
</html>

HTML并没有学过，参考资料里面介绍的也很少。所以都是自己理解的！还不太清楚如何在页面底部显示信息，所以就自己加了很多换行符~

CSS Code：

body {
	background-color: #FFF;
}

p.newImg {   当元素<p>的class属性里有newImg值则将图片设置到内容前

	padding-left: 35px;
	background-image: url(images/new.gif);  //文件已上传<img src="https://img-blog.youkuaiyun.com/20140612104358046" alt="" />
	background-repeat: no-repeat;
}

JSP Code：

window.onload = initPage;

function initPage() {
	var now = new Date();
	var lastVisit = new Date(cookieVal("pageVisit"));
	var expireDate = new Date();
	expireDate.setMonth(expireDate.getMonth()+6);
	
	document.cookie = "pageVisit=" + now + ";expires=" + expireDate.toGMTString();
	var allGrafs = document.getElementsByTagName("p");<span style="white-space:pre">	</span>//找到标签名为"p"的
	
	for (var i=0; i<allGrafs.length; i++) {
		if (allGrafs[i].id.indexOf("New-") != -1) {<span style="white-space:pre">	</span>//根据id找到要比较的内容
			newCheck(allGrafs[i],allGrafs[i].id.substring(4));
		}
	}	
	
	function newCheck(grafElement,dtString) {
		var yyyy = parseInt(dtString.substring(0,4),10);<span style="white-space:pre">	</span>//取出内容发布时间--“年”，转化为十进制整形
		var mm = parseInt(dtString.substring(4,6),10);
		var dd = parseInt(dtString.substring(6,8),10);
		var lastChgd = new Date(yyyy,mm-1,dd);  //<span style="color:#ff0000;">月份是基于0的</span>
			
		if (lastChgd.getTime() > lastVisit.getTime()) {		//内容时间比登陆时间更接近现在
			grafElement.className += " newImg";	//将newImg属性加入class
		}
	}
}

function cookieVal(cookieName) {
	var thisCookie = document.cookie.split("; ");      //获得所有cookie的值存入数组

	for (var i=0; i<thisCookie.length; i++) {
		if (cookieName == thisCookie[i].split("=")[0]) {    //找到名字为"pageVisit"的cookie

		document.getElementById("lastlog").innerHTML="You last log in "+thisCookie[i].split("=")[1];    //将cookie的值显示出来（这里就是登陆时间）
	        return thisCookie[i].split("=")[1];
		}
	}
	document.getElementById("lastlog").innerHTML="You never log in this website";
	return "1 January 1970";  //JavaScript能识别的最早时间
}

大致步骤就是这些，存在两个问题：

①最后登录时间固定在页面左下角

②在360和chrome上创建cookie