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

更新时间：2008年09月02日 15:38:23 作者：

最近在工作当中遇到一个问题有个页面需要添加一个浏览历史记录功能，具体来说就是要记录下用户在此网站的点击历史并把它们降序排列出来（只显示前6个浏览历史而且不能重复）。

查看效果：

<html> <body>    <script> //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; } function setCookie (name, value) { var exp = new Date(); exp.setTime (exp.getTime()+3600000000); document.cookie = name + "=" + value + "; expires=" + exp.toGMTString(); } ////////////////////////////////////   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; address=srcElem.href+"_www.achome.cn_"; wlink=linkname+"+"+address;   old_info=getCookie("history_info"); 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); history_show().reload(); break; } } srcElem = srcElem.parentNode; } } catch(e){} return true; } document.onclick=glog; //////////////////////////////////////////////////////////////////////////////// function history_show() {         var history_info=getCookie("history_info");   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>");       }       document.getElementById("history").innerHTML=content;       } } else   {document.getElementById("history").innerHTML="对不起，您没有任何浏览纪录";} } // JavaScript Document </script> <div>浏览历史排行（只显示6个最近访问站点并且没有重复的站点出现）</div> <div id="history"> <script> history_show(); </script> </div> <div>   点击链接： <a href="#">网站1</a> <a href="#">网站2</a> <a href="#">网站3</a> <a href="#">网站4</a> <a href="#">网站5</a> <a href="#">网站6</a> <a href="#">网站7</a> <a href="#">网站8</a> <a href="#">网站9</a> </div> <div>如果有其他疑问请登陆<a href=https://www.jb51.net>脚本之家</a>与我联系</div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

OpenLayers实现图层切换控件
这篇文章主要为大家详细介绍了OpenLayers实现图层切换控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
纯javascript响应式树形菜单效果
这篇文章主要为大家分享了纯javascript响应式树形菜单效果的简单教程，对多级目录树形菜单感兴趣的小伙伴们可以参考一下
2015-11-11
JavaScript实现将xml转换成html table表格的方法
这篇文章主要介绍了JavaScript实现将xml转换成html table表格的方法,实例分析了javascript操作XML文件与table表格的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JS对HTML表格进行增删改操作
这篇文章主要为大家详细介绍了JS对HTML表格进行增删改操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
JS数组方法reduce的用法实例分析
这篇文章主要介绍了JS数组方法reduce的用法,结合实例形式详细分析了JS数组方法reduce的基本功能、使用方法及相关操作注意事项,需要的朋友可以参考下
2020-03-03
javascript的防抖节流函数解析
这篇文章主要为大家介绍了javascript防抖节流函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
js 深拷贝函数
Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.那怎么来做呢答案是克隆.
2008-12-12
windows系统下简单nodejs安装及环境配置
相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼,这里不想谈太多的nodejs的相关信息。只说一下，windows系统下简单nodejs环境配置
2013-01-01
DIV始终居中的js代码
这篇文章主要介绍了DIV始终居中的js代码,需要的朋友可以参考下
2014-02-02
prefers-color-scheme设置检测系统主题色
这篇文章主要为大家介绍了prefers-color-scheme设置检测系统主题色实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04