快捷導(dǎo)航

通過Jquery.cookie.js實(shí)現(xiàn)展示瀏覽網(wǎng)頁的歷史記錄超管用

更新時間：2015年10月23日 11:48:18 投稿：mrr

本文給大家分享利用cookie插件獲取用戶瀏覽文章或者是網(wǎng)頁的歷史記錄，并把用戶最近瀏覽過的信息顯示在頁面，涉及到 jquery.cookie.js相關(guān)知識，感興趣的朋友可以參考下

本文就是要利用cookie插件，獲取用戶瀏覽文章歷史記錄，并將用戶最近瀏覽歷史記錄顯示在頁面。

在需要添加cookie的頁面加上如下js

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
 <script type="text/javascript">
 $(function(){
 var art_title = $("title").html();
 var art_url = document.URL;
 var history;
 var json="[";
 //json1是第一次注入cookie以后的第一個json，"此時還不是數(shù)組" 以點(diǎn)帶面的處理
 var json1;
 var canAdd= true;
 //var json1=eval("({sitename:'dreamdu',sitedate:new Date(1980, 12, 17, 12, 0, 0)})");
 if(!$.cookie("history")){
 //第一次的時候需要初始化
 history = $.cookie("history","{title:\""+art_title+"\""+",url:\""+art_url+"\"}");
 }else {
 //已經(jīng)存在
 history = $.cookie("history");
 json1 = eval("("+history+")");
 $(json1).each(function(){
  if(this.title==art_title){
  canAdd=false;
  return false;
  }
 })
 if(canAdd){
  $(json1).each(function(){
  json = json + "{\"title\":\""+this.title+"\",\"url\":\""+this.url+"\"},";
  })
  json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]"; 
  $.cookie("history",json,{expires:1});
 }
 }
 })
 </script>

在展示歷史記錄的頁面添加如下js

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
 <script type="text/javascript">
 $(function(){ 
 if($.cookie("history")){
 var json = eval("("+$.cookie("history")+")"); 
 var list =""; 
 $(json).each(function(){
  list = list + "<li><a href='"+this.url+"' target='_blank'>"+this.title+"</a></li>";
  alert(this.url);
 })
 $("#list").html(list);;
 } 
 }); 
 </script>
 </head>

以上內(nèi)容是小編給大家分享的通過Jquery.cookie.js實(shí)現(xiàn)展示瀏覽網(wǎng)頁的歷史記錄，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

jquery中實(shí)現(xiàn)簡單的tabs插件功能的代碼
jquery改變了程序員寫javascript的方式。作為jquery的愛好者和新手，最近我學(xué)會了用寥寥幾句jquery代碼實(shí)現(xiàn)類似tabs插件的功能，相信此文能為許多剛?cè)腴T的jquery愛好者和想實(shí)現(xiàn)tabs插件功能的朋友帶來一些幫助。
2011-03-03
Jquery Ajax學(xué)習(xí)實(shí)例向頁面發(fā)出請求，返回XML格式數(shù)據(jù)
Jquery Ajax學(xué)習(xí)實(shí)例向頁面發(fā)出請求，返回XML格式數(shù)據(jù)的代碼
2010-03-03
jQuery實(shí)現(xiàn)仿微軟首頁感應(yīng)鼠標(biāo)變化滑動窗口效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿微軟首頁感應(yīng)鼠標(biāo)變化滑動窗口效果,基于jQuery響應(yīng)鼠標(biāo)事件簡單實(shí)現(xiàn)動畫效果,非常簡單實(shí)用,需要的朋友可以參考下
2015-10-10
jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery動畫效果實(shí)現(xiàn)圖片無縫連續(xù)滾動
這篇文章主要為大家介紹了jQuery動畫效果實(shí)現(xiàn)圖片無縫連續(xù)滾動，實(shí)現(xiàn)類似連續(xù)不間斷的滾動廣告位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-01-01
jquery實(shí)現(xiàn)百葉窗效果
本文主要分享了jquery實(shí)現(xiàn)百葉窗效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
jQuery解析Json實(shí)例詳解
這篇文章主要介紹了jQuery解析Json的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery針對json的常用解析與轉(zhuǎn)換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
jQuery DIV彈出效果實(shí)現(xiàn)代碼
現(xiàn)在很多網(wǎng)站都流行這種彈出式的對話框或是信息顯示框，很想將這個流行元素加入到自己的項(xiàng)目中。使用jQuery可以不費(fèi)大力氣實(shí)現(xiàn)這種效果。將其記錄到我的Blog中，與業(yè)界朋友們起分享。
2009-07-07
jquery實(shí)現(xiàn)圖片裁剪思路及實(shí)現(xiàn)
JS，jquery不能實(shí)現(xiàn)圖片的裁剪，只是顯示了一個假象，在服務(wù)器上用獲得的各個坐標(biāo)值，以及原始圖片，用JAVA進(jìn)行裁剪
2013-08-08
基于jquery步驟進(jìn)度條源碼分享
本文給大家分享基于jquery步驟進(jìn)度條源碼分享，實(shí)現(xiàn)功能是這樣的，在輸入框中輸入第3步，點(diǎn)擊重新生成按鈕，相應(yīng)的步驟顏色就會加深，對jquery步驟進(jìn)度條感興趣的朋友一起看看吧
2015-11-11