用javascript結合Cookies記錄瀏覽曆史

最近在工作當中遇到一個問題 有個頁面需要添加一個瀏覽歷程記錄功能
具體來說就是要記錄下使用者在此網站的點擊曆史 並把它們降序排列出來（只顯示前6個瀏覽曆史而且不能重複）
由於以前對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="對不起，您沒有任何瀏覽紀錄";}
}