javascript结合Cookies实现浏览记录历史

  由于以前对javascript了解不够深入,一时间手足无措。

  后来经过两位高手同事的指点(对这两位同事的敬仰犹如滔滔江水连绵不绝...),恍然大悟,豁然开朗

  成功地完成了此功能的添加。

  首先来介绍一下javascript中关于此功能的一些对象和方法:

  1. window.event对象:

  event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

  event对象只在事件发生的过程中才有效。

  2. event.srcElement:

  表示该事件的发生源 通俗一点说也就是该事件被触发的地方

  3. srcElement.parentNode:

  表示该事件发生源的父结点

  4. srcElement.tagName:

  表示事件发生源的标签名

  5. toUpperCase():

  大写化相应字符串的方法

  基本上就是这些属性和方法,可能对于刚刚接触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>和<a/>之间的文字,也就是链接名称哈

  address=srcElem.href+"_www.achome.cn_"; //取出事件发生源的href值,也就是该链接的地址

  wlink=linkname+"+"+address; //将链接名称和链接地址整合到一个变量当中

  old_info=getCookie("history_info"); //从Cookies中取出以前纪录的浏览历史,该函数后面有声明

  //以下程序开始判断新的浏览动作是否和已有的前6个历史重复,如果不重复则写入cookies

  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函数

  第2部分:Cookies的相关函数。

  

复制代码 代码如下:

  //cookie的相关函数

  //读取cookie中指定的内容

  function getCookieVal (offset) {

  var endstr = document.cookie.indexOf (";", offset);

  if (endstr == -1) endstr = document.cookie.length;

  return unescape(document.cookie.substring(offset, endstr));

  }

  function getCookie (name) {

  var arg = name + "=";

  var alen = arg.length;

  var clen = document.cookie.length;

  var i = 0;

  while (i < clen) {

  var j = i + alen;

  if (document.cookie.substring(i, j) == arg) return getCookieVal (j);

  i = document.cookie.indexOf(" ", i) + 1;

  if (i == 0) break;

  }

  return null;

  }

  //将浏览动作写入cookie

  function setCookie (name, value) {

  var exp = new Date();

  exp.setTime (exp.getTime()+3600000000);

  document.cookie = name + "=" + value + "; expires=" + exp.toGMTString();

  }

  第3部分:页面显示函数。

  

复制代码 代码如下:

  function history_show()

  {

  var history_info=getCookie("history_info"); //取出cookie中的历史记录

  var content=""; //定义一个显示变量

  if(history_info!=null)

  {

  history_arg=history_info.split("_www.achome.cn_");

  var i;

  for(i=0;i<=5;i++)

  {

  if(history_arg[i]!="null")

  {

  var wlink=history_arg[i].split("+");

  content+=("<font color='#ff000'>↑</font>"+"<a href='"+wlink[1]+"' target='_blank'>"+wlink[0]+"</a><br>");

  }

  document.getElementById("history").innerHTML=content;

  }

  }

  else

  {document.getElementById("history").innerHTML="对不起,您没有任何浏览纪录";}

  }

  查看效果:

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]