JavaScript结合Cookies实现简易浏览历史记录功能

JavaScript结合Cookies实现简易浏览历史记录功能

此前因对JavaScript掌握不足，导致开发时感到困惑。

随后在两位资深同事的指导下（对其专业能力深感钦佩），思路逐渐清晰。

最终成功实现了该功能模块。

关键对象与方法说明

首先梳理实现此功能涉及的关键JavaScript对象与方法：

1. window.event对象：

该对象封装了事件的状态信息，包括触发事件的元素、鼠标坐标、按键状态等。

注意，event对象仅在事件触发期间有效。

2. event.srcElement：

用于标识引发事件的具体元素，即事件发生的源头。

3. srcElement.parentNode：

指向触发事件元素的父级节点。

4. srcElement.tagName：

获取触发事件元素的标签名称。

5. toUpperCase()：

用于将字符串转换为大写格式的方法。

上述即为Cookies相关的主要属性与方法。对于初次接触JavaScript或较少使用此类功能的朋友而言，这些对象可能略显陌生，但无需担忧。深入理解后会发现其原理并不复杂，其操作逻辑与JavaScript表单验证等常见功能并无显著差异。

接下来结合具体代码逐步解析（代码可能存在瑕疵，欢迎指正交流）：

JavaScript记录浏览行为代码实现

第一部分：JavaScript记录浏览行为。

function glog(evt) //定义记录鼠标点击行为的函数
{ 
evt=evt?evt:window.event;var srcElem=(evt.target)?evt.target:evt.srcElement;
try
{ 
while(srcElem.parentNode&&srcElem!=srcElem.parentNode)
//上述逻辑用于判断点击是否发生在有效区域内，避免记录无效点击
{ 
if(srcElem.tagName&&srcElem.tagName.toUpperCase()=="A")//判断点击目标是否为链接元素
{ 
linkname=srcElem.innerHTML; //获取链接文本内容，即<a>标签内的文字
address=srcElem.href+"_www.achome.cn_"; //获取链接地址并拼接固定标识
wlink=linkname+"+"+address; //将链接名与地址合并为单一变量
old_info=getCookie("history_info"); //读取Cookie中已保存的历史记录，相关函数后续定义
//接下来判断新点击是否与现有的前6条历史记录重复，若不重复则写入Cookie
var insert=true;
if(old_info==null) //检查Cookie是否为空
{ 
insert=true;
} 
else
{ 
var old_link=old_info.split("_www.achome.cn_");
for(var j=0;j<=5;j++)
{ 
if(old_link[j].indexOf(linkname)!=-1)
insert=false;
if(old_link[j]=="null")
break;
} 
} 
if(insert)
{ 
wlink+=getCookie("history_info");
setCookie("history_info",wlink); //写入Cookie，相关函数后续定义
history_show().reload();
break;
} 
} 
srcElem = srcElem.parentNode;
} 
} 
catch(e){}
return true;
} 
document.onclick=glog;//绑定页面点击事件，每次点击均执行glog函数