javascript结合Cookies实现浏览记录历史_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

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

PHP中文网

May 16, 2016 pm 07:01 PM

cookiesjavascript瀏覽歷史

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

由于以前对javascript了解不够深入，一时间手足无措。
后来经过两位高手同事的指点（对这两位同事的敬仰犹如滔滔江水连绵不绝...），恍然大悟，豁然开朗
成功地完成了此功能的添加。

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

1. window.event对象：
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。

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

3. srcElement.parentNode：
表示该事件发生源的父结点

4. srcElement.tagName：
表示事件发生源的标签名

5. toUpperCase()：
大写化相应字符串的方法

基本上就是这些属性和方法，可能对于刚刚接触javascript的朋友们或者以前很少使用此类功能的朋友来说，这些对象有些陌生，不过没关系，了解以后发现其实并不难，和javascript验证表单之类的并没有太多的不同。

下面就结合程序给大家一步一步讲解（程序难免有不合理之处，希望大家多多指正，共同进步）：

第一部分：javascript纪录浏览动作。

复制代码代码如下:

查看效果：

<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=&#39;#ff000&#39;>↑</font>"+"<a href=&#39;"+wlink[1]+"&#39; target=&#39;_blank&#39;>"+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=http://www.jb51.net>脚本之家</a>与我联系</div> 

</body> 

</html>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles