javascript結(jié)合Cookies實(shí)現(xiàn)瀏覽記錄歷史第1/3頁
更新時(shí)間:2008年09月02日 15:38:23 作者:
最近在工作當(dāng)中遇到一個(gè)問題 有個(gè)頁面需要添加一個(gè)瀏覽歷史記錄功能,具體來說就是要記錄下用戶在此網(wǎng)站的點(diǎn)擊歷史 并把它們降序排列出來(只顯示前6個(gè)瀏覽歷史而且不能重復(fù))。
由于以前對(duì)javascript了解不夠深入,一時(shí)間手足無措。
后來經(jīng)過兩位高手同事的指點(diǎn)(對(duì)這兩位同事的敬仰猶如滔滔江水連綿不絕...),恍然大悟,豁然開朗
成功地完成了此功能的添加。
首先來介紹一下javascript中關(guān)于此功能的一些對(duì)象和方法:
1. window.event對(duì)象:
event代表事件的狀態(tài),例如觸發(fā)event對(duì)象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等。
event對(duì)象只在事件發(fā)生的過程中才有效。
2. event.srcElement:
表示該事件的發(fā)生源 通俗一點(diǎn)說也就是該事件被觸發(fā)的地方
3. srcElement.parentNode:
表示該事件發(fā)生源的父結(jié)點(diǎn)
4. srcElement.tagName:
表示事件發(fā)生源的標(biāo)簽名
5. toUpperCase():
大寫化相應(yīng)字符串的方法
基本上就是這些屬性和方法,可能對(duì)于剛剛接觸javascript的朋友們或者以前很少使用此類功能的朋友來說,這些對(duì)象有些陌生,不過沒關(guān)系,了解以后發(fā)現(xiàn)其實(shí)并不難,和javascript驗(yàn)證表單之類的并沒有太多的不同。
下面就結(jié)合程序給大家一步一步講解(程序難免有不合理之處,希望大家多多指正,共同進(jìn)步):
第一部分:javascript紀(jì)錄瀏覽動(dòng)作。
function glog(evt) //定義紀(jì)錄鼠標(biāo)點(diǎn)擊動(dòng)作的函數(shù)
{
evt=evt?evt:window.event;var srcElem=(evt.target)?evt.target:evt.srcElement;
try
{
while(srcElem.parentNode&&srcElem!=srcElem.parentNode)
//以上這個(gè)語句判斷鼠標(biāo)動(dòng)作是否發(fā)生在有效區(qū)域,防止用戶的無效點(diǎn)擊也被紀(jì)錄下來
{
if(srcElem.tagName&&srcElem.tagName.toUpperCase()=="A")//判斷用戶點(diǎn)擊的對(duì)象是否屬于鏈接
{
linkname=srcElem.innerHTML; //取出事件發(fā)生源的名稱,也就是<a>和<a/>之間的文字,也就是鏈接名稱哈
address=srcElem.href+"_www.achome.cn_"; //取出事件發(fā)生源的href值,也就是該鏈接的地址
wlink=linkname+"+"+address; //將鏈接名稱和鏈接地址整合到一個(gè)變量當(dāng)中
old_info=getCookie("history_info"); //從Cookies中取出以前紀(jì)錄的瀏覽歷史,該函數(shù)后面有聲明
//以下程序開始判斷新的瀏覽動(dòng)作是否和已有的前6個(gè)歷史重復(fù),如果不重復(fù)則寫入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,該函數(shù)后面有聲明
history_show().reload();
break;
}
}
srcElem = srcElem.parentNode;
}
}
catch(e){}
return true;
}
document.onclick=glog;//使每一次頁面的點(diǎn)擊動(dòng)作都執(zhí)行g(shù)log函數(shù)
后來經(jīng)過兩位高手同事的指點(diǎn)(對(duì)這兩位同事的敬仰猶如滔滔江水連綿不絕...),恍然大悟,豁然開朗
成功地完成了此功能的添加。
首先來介紹一下javascript中關(guān)于此功能的一些對(duì)象和方法:
1. window.event對(duì)象:
event代表事件的狀態(tài),例如觸發(fā)event對(duì)象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等。
event對(duì)象只在事件發(fā)生的過程中才有效。
2. event.srcElement:
表示該事件的發(fā)生源 通俗一點(diǎn)說也就是該事件被觸發(fā)的地方
3. srcElement.parentNode:
表示該事件發(fā)生源的父結(jié)點(diǎn)
4. srcElement.tagName:
表示事件發(fā)生源的標(biāo)簽名
5. toUpperCase():
大寫化相應(yīng)字符串的方法
基本上就是這些屬性和方法,可能對(duì)于剛剛接觸javascript的朋友們或者以前很少使用此類功能的朋友來說,這些對(duì)象有些陌生,不過沒關(guān)系,了解以后發(fā)現(xiàn)其實(shí)并不難,和javascript驗(yàn)證表單之類的并沒有太多的不同。
下面就結(jié)合程序給大家一步一步講解(程序難免有不合理之處,希望大家多多指正,共同進(jìn)步):
第一部分:javascript紀(jì)錄瀏覽動(dòng)作。
復(fù)制代碼 代碼如下:
function glog(evt) //定義紀(jì)錄鼠標(biāo)點(diǎn)擊動(dòng)作的函數(shù)
{
evt=evt?evt:window.event;var srcElem=(evt.target)?evt.target:evt.srcElement;
try
{
while(srcElem.parentNode&&srcElem!=srcElem.parentNode)
//以上這個(gè)語句判斷鼠標(biāo)動(dòng)作是否發(fā)生在有效區(qū)域,防止用戶的無效點(diǎn)擊也被紀(jì)錄下來
{
if(srcElem.tagName&&srcElem.tagName.toUpperCase()=="A")//判斷用戶點(diǎn)擊的對(duì)象是否屬于鏈接
{
linkname=srcElem.innerHTML; //取出事件發(fā)生源的名稱,也就是<a>和<a/>之間的文字,也就是鏈接名稱哈
address=srcElem.href+"_www.achome.cn_"; //取出事件發(fā)生源的href值,也就是該鏈接的地址
wlink=linkname+"+"+address; //將鏈接名稱和鏈接地址整合到一個(gè)變量當(dāng)中
old_info=getCookie("history_info"); //從Cookies中取出以前紀(jì)錄的瀏覽歷史,該函數(shù)后面有聲明
//以下程序開始判斷新的瀏覽動(dòng)作是否和已有的前6個(gè)歷史重復(fù),如果不重復(fù)則寫入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,該函數(shù)后面有聲明
history_show().reload();
break;
}
}
srcElem = srcElem.parentNode;
}
}
catch(e){}
return true;
}
document.onclick=glog;//使每一次頁面的點(diǎn)擊動(dòng)作都執(zhí)行g(shù)log函數(shù)
您可能感興趣的文章:
- 使用JS location實(shí)現(xiàn)搜索框歷史記錄功能
- JS返回頁面時(shí)自動(dòng)回滾到歷史瀏覽位置
- jquery使用Cookie和JSON記錄用戶最近瀏覽歷史
- 通過Jquery.cookie.js實(shí)現(xiàn)展示瀏覽網(wǎng)頁的歷史記錄超管用
- js 實(shí)現(xiàn)瀏覽歷史記錄示例
- javascript history對(duì)象(歷史記錄)使用方法(實(shí)現(xiàn)瀏覽器前進(jìn)后退)
- javascript 歷史記錄 經(jīng)常用于產(chǎn)品最近歷史瀏覽
- JavaScript入門教程(7) History歷史對(duì)象
- JavaScript中的History歷史對(duì)象
- javascript-hashchange事件和歷史狀態(tài)管理實(shí)例分析
相關(guān)文章
JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript觀察者模式與發(fā)布訂閱模式相關(guān)概念、原理2020-05-05
JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式
這篇文章主要介紹了JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式的相關(guān)資料,這里提供了三種方式,和實(shí)例代碼,需要的朋友可以參考下2016-10-10
javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
如何利用JavaScript?實(shí)現(xiàn)繼承
這篇文章主要介紹了如何利用JavaScript?實(shí)現(xiàn)繼承,JavaScript?在編程語言界是個(gè)特殊種類,它和其他編程語言很不一樣,JavaScript可以在運(yùn)行的時(shí)候動(dòng)態(tài)地改變某個(gè)變量的類型,下面小編將繼續(xù)介紹JavaScript如何實(shí)現(xiàn)繼承,需要的朋友可以參考下2022-02-02
javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript多物體運(yùn)動(dòng)的相關(guān)注意事項(xiàng)與具體實(shí)現(xiàn)代碼,包含四個(gè)div塊的橫向、豎向移動(dòng),顏色與邊框漸變效果,需要的朋友可以參考下2016-01-01
Bootstrap柵格系統(tǒng)簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03

