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需再刷新一下页面才能执行]

您可能感兴趣的文章:

关于layui 弹出层一闪而过就消失的解决方法
今天小编就为大家分享一篇关于layui 弹出层一闪而过就消失的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Element-plus安装及基础组件使用详解
ElementPlus是一个基于Vue3的UI组件库,旨在提供丰富的HTML元素封装,以简化前端开发,主要特点包括预定义样式、事件处理、易用性等,为开发者提供了一致且美观的用户界面,同时支持按需导入,提高项目效率,感兴趣的朋友一起看看吧
2024-09-09
JavaScript设计模式之观察者模式与发布订阅模式详解
这篇文章主要介绍了JavaScript设计模式之观察者模式与发布订阅模式,结合实例形式详细分析了JavaScript观察者模式与发布订阅模式相关概念、原理
2020-05-05
JS 实现导航菜单中的二级下拉菜单的几种方式
这篇文章主要介绍了JS 实现导航菜单中的二级下拉菜单的几种方式的相关资料,这里提供了三种方式，和实例代码，需要的朋友可以参考下
2016-10-10
JavaScript组件开发完整示例
这篇文章主要介绍了JavaScript组件开发的方法,结合完整实例形式分析了组件的原理与实现技巧,代码包含的详尽的注释,便于理解,需要的朋友可以参考下
2015-12-12
javascript实现抽奖程序的简单实例
下面小编就为大家带来一篇javascript实现抽奖程序的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
如何利用JavaScript 实现继承
这篇文章主要介绍了如何利用JavaScript 实现继承，JavaScript 在编程语言界是个特殊种类，它和其他编程语言很不一样，JavaScript可以在运行的时候动态地改变某个变量的类型,下面小编将继续介绍JavaScript如何实现继承,需要的朋友可以参考下
2022-02-02
javascript多物体运动实现方法分析
这篇文章主要介绍了javascript多物体运动实现方法,结合实例形式分析了JavaScript多物体运动的相关注意事项与具体实现代码,包含四个div块的横向、竖向移动,颜色与边框渐变效果,需要的朋友可以参考下
2016-01-01
微信小程序自定义带价格显示日历效果
这篇文章主要为大家详细介绍了微信小程序自定义带价格显示日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
Bootstrap栅格系统简单实现代码
这篇文章主要为大家详细介绍了Boostrap栅格系统的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具