溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用Cookie和JSON怎么記錄用戶最近瀏覽歷史，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
在一些電商網站，有“商品瀏覽歷史記錄”這一功能，一些視頻類、小說類的網站也能記錄用戶最近的瀏覽歷史。小編將使用Cookie以及JSON來講解如何實現這一功能。
Cookie可以用來記錄客戶端用戶ID、密碼、瀏覽過的網頁、停留的時間等信息，jQuery提供了一個cookie插件，能非常方便的讀寫cookie信息，關于cookie插件，詳情可以了解本站前些文章：使用jQuery操作Cookies。
下面就是要利用cookie插件，獲取用戶瀏覽文章歷史記錄，并將用戶最近瀏覽歷史記錄顯示在頁面。為了配合講解，我以本站博客文章為例，讀者瀏覽本站博客文章后，會被記錄下瀏覽的文章標題和URL地址，當進入到demo頁面后，會展示讀者最近瀏覽的5篇文章。
1、獲取文章詳情頁面文章的標題和頁面地址；
2、獲取瀏覽歷史cookie信息，判斷如果瀏覽歷史的cookie中已經存在當前文章的瀏覽記錄，則不進行任何操作；
3、如果瀏覽歷史的cookie中不存在當前文章的瀏覽記錄，則將當前文章的cookie信息（文章標題和頁面地址）寫入瀏覽歷史的cookie信息中。寫入的cookie信息，采用JSON數據格式，便于讀取。
4、獲取瀏覽歷史cookie信息，遍歷JSON數據，分析并輸出瀏覽歷史記錄。
1、保證要記錄瀏覽歷史的文章詳情頁面已載入jquery和cookie插件。獲取當前文章頁面的文章標題和頁面地址：
var art_title = $(".blog_txt h3").text(); //文章標題
var art_url = document.URL; //頁面地址
2、獲取用戶歷史瀏覽記錄，如果已經存在瀏覽歷史，則分析歷史記錄的cookie信息（JSON數據格式），獲取記錄長度。
var canAdd = true; //初始可以插入cookie信息
var hisArt = $.cookie("hisArt");
var len = 0;
if(hisArt){
hisArt = eval("("+hisArt+")");
len = hisArt.length;
}
3、如果瀏覽歷史cookie信息已經存在，則遍歷cookie信息，對比當前文章標題，如果cookie信息中已經存在當前文章標題，則中止程序，不做任何操作。
$(hisArt).each(function(){
if(this.title == art_title){
canAdd = false; //已經存在，不能插入
return false;
}
});
4、如果瀏覽歷史cookie中不存在當前文章，則可以像瀏覽歷史cookie中插入當前文章的cookie信息。此時需要構建json數據，將已有的瀏覽記錄cookie和當前頁面的cookie信息已經組合成JSON數據，然后通過$.cookie()方法寫入到瀏覽歷史記錄中。
if(canAdd==true){
var json = "[";
var start = 0;
if(len>4){start = 1;}
for(var i=start;i<len;i++){
json = json + "{"title":""+hisArt[i].title+"","url":""+hisArt[i].url+""},";
}
json = json + "{"title":""+art_title+"","url":""+art_url+""}]";
$.cookie("hisArt",json,{expires:1});
}
這樣，我們就得到了用戶的瀏覽歷史記錄cookie信息，cookie名稱為hisArt，值為JSON格式的數據，如：[{"title":"article1","url":"a.html"},{"title":"article2","url":"b.html"},]
5、接下來，我們就要在需要展示用戶瀏覽歷史記錄的cookie信息。在本例對應的demo頁面，首先要獲取瀏覽歷史cookie：hisArt的值，然后分析，遍歷，組合成字符串輸出到頁面，代碼如下：
$(function(){
var json = eval("("+$.cookie("hisArt")+")");
var list = "";
for(var i=0; i<json.length;i++){
list = list + "<li><a href='"+json[i].url+"' target='_blank'>"+json[i].title+"</a></li>";
}
$("#list").html(list);
});
我們在demo的頁面中放置了一個#list的列表，當然這個頁面也需要預先載入jquery庫和cookie插件。
上述就是小編為大家分享的使用Cookie和JSON怎么記錄用戶最近瀏覽歷史了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
