javascript结合Cookies实现浏览记录历史第1/3页

由于以前对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函数

当前1/3页 123下一页阅读全文

赞 (0)

相关推荐

  • 通过Jquery.cookie.js实现展示浏览网页的历史记录超管用

    本文就是要利用cookie插件,获取用户浏览文章历史记录,并将用户最近浏览历史记录显示在页面. 在需要添加cookie的页面加上如下js <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script

  • js操作cookie保存浏览记录的方法

    本文实例讲述了js操作cookie保存浏览记录的方法.分享给大家供大家参考,具体如下: 说明:最近做了一个功能,记录用户浏览过的产品页面.我的思路是,客户每次进入产品页面,就自己调用JS把产品信息以json的形式保存到cookie里面. 浏览记录的显示是从cookie里读出来,然后解析成json,生成html元素.因为用户可能会同时打开好几个页面,这几个页面上可能都有浏览记录,为了使即使显示浏览记录,每秒中刷新一次. 要用到2个js文件,history.js,关键的聊天记录保存和读取代码.jso

  • JS读取cookies信息(记录用户名)

    首先,在用户提交评论后,让客户端cookies记录相关值,例如:asp下的cookies赋值方式采用下面的这样的语句: 复制代码 代码如下: response.cookies("username")="name" response.cookies("username").expires=Date+30 通过以上asp程序给cookies赋值.如何在静态页html读取这个cookies,并且显示在用户?因为是生成了html,我们无法再利用asp程序

  • JavaScript 利用Cookie记录用户登录信息

    Html代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  • js使用cookie记录用户名的方法

    本文实例讲述了js使用cookie记录用户名的方法.分享给大家供大家参考,具体如下: cookie思路:当点击登录按钮时,把cookie存起来,再次访问的时候就读取cookie,即把txt的value设置之前存起来cookie的值就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

  • jquery使用Cookie和JSON记录用户最近浏览历史

    在一些电商网站,有"商品浏览历史记录"这一功能,一些视频类.小说类的网站也能记录用户最近的浏览历史.本文将使用Cookie以及JSON来讲解如何实现这一功能. Cookie可以用来记录客户端用户ID.密码.浏览过的网页.停留的时间等信息,jQuery提供了一个cookie插件,能非常方便的读写cookie信息. 基本流程: 1.获取文章详情页面文章的标题和页面地址: 2.获取浏览历史cookie信息,判断如果浏览历史的cookie中已经存在当前文章的浏览记录,则不进行任何操作: 3.如

  • js保存当前路径(cookies记录)

    js保存当前路径(cookies记录)

    简单地说,就是在个人中心页面,该客户点击取消订单,提交到某个action,进行数据库的操作,将一张表中的字段值改变,然后重新返回到个人中心页面,只是那里的"取消"按钮变成了灰色的"已取消"就OK了,而在订单的详细页面,也是相同的,提交到相同的acion,但是返回页面不是个人中心页面,而是订单的详细页面. 这时候可以考虑用js保存当前路径,写到cookie中,在acion中获取到该路径,通过get/set方法,只需要在<result></result

  • JS基于cookie实现来宾统计记录访客信息的方法

    JS基于cookie实现来宾统计记录访客信息的方法

    本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名字;您浏览该网页的次数;您上次浏览网页的时间.可以更改姓名. 运行效果如下图所示: 具体代码如下: <html> <head> <title>记录客户信息</title> <script language="JavaScript"> <!

  • javascript cookie基础应用之记录用户名的方法

    本文实例讲述了javascript cookie基础应用之记录用户名的方法.分享给大家供大家参考,具体如下: 前面有一篇关于cookie基础的文章,封装了 cookie.js,下面我们通过一个实例来应用这个 js. 最常见的就是记住用户名,当用户登录过一次后,通过 cookie 记录下该用户的账号和密码,这样下次打开页面的时候不用再次输入账号密码了.附上代码: <!DOCTYPE HTML> <html lang="en-US"> <head> &l

  • 用js+cookie记录滚动条位置

    记录滚动条位置 dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd

  • js基于cookie记录来宾姓名的方法

    本文实例讲述了js基于cookie记录来宾姓名的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

随机推荐