javascript 歷史記錄 經(jīng)常用于產(chǎn)品最近歷史瀏覽
下面通過代碼講解:
$(function(){//ready后再獲取
//第一步取得需要寫入cookie的內(nèi)容
var pro_url = document.URL;//頁面地址
var pro_name = $(".Product_Name h1").text();//產(chǎn)品名稱
var pro_img = $("#Product_BigImage img")[0].src;//圖片路徑
var pro_price = $(".Pro_baseinfo li").eq(2).children("img")[0].src;//價(jià)格
var canAdd = true;//默認(rèn)可以插入
//第二步,取得cookie并取得已有歷史記錄產(chǎn)品數(shù)目,對于cookie的操作,這里用了jquery的一個(gè)插件,你不喜歡,可以用自己的
var hisProduct = $.cookie('hisProduct');
var len = 0;
if(hisProduct){
hisProduct = eval('('+hisProduct+')');//靜普通字符串轉(zhuǎn)換成json
len = hisProduct.length;
}
//第三步,判斷當(dāng)前頁面的產(chǎn)皮是否已經(jīng)在記錄中,用產(chǎn)品名稱去比較
$(hisProduct).each(function(i){
if(this.proname == pro_name){
canAdd = false;//已經(jīng)存在
return;
}
})
//第四步,可以添加的話。
if(canAdd){
var temp = "[";
var startNum = 0;
if(len > 2){startNum = 1;}//如果已經(jīng)記錄產(chǎn)品>2,前面說了,最多3個(gè)產(chǎn)品,所以這里其實(shí)是3,那么不需要第一個(gè)產(chǎn)品的記錄
for(var m = startNum;m < len;m++){
temp = temp + "{\"url\":\""+hisProduct[m].url+"\",\"imgurl\":\""+hisProduct[m].imgurl+"\",\"proname\":\""+hisProduct[m].proname+"\",\"proprice\":\""+hisProduct[m].proprice+"\"},";
}
temp = temp + "{\"url\":\""+url_+"\",\"imgurl\":\""+imgurl_+"\",\"proname\":\""+proname_+"\",\"proprice\":\""+proprice_+"\"}]";
$.cookie("hisProduct",temp,{ expires:1});//ie6下是否有寫入
}
//第五步,OK,輸出吧
var newtemp = eval('('+$.cookie("hisProduct")+')');
var newtemp_ = "";
for(var n = newtemp.length - 1;n > -1;n--){//這里你可以輸出為自己要的格式
newtemp_ = newtemp_ + "<li><p><a target='_blank' href='"+newtemp[n].url+"'><img src='"+newtemp[n].imgurl+"' \/><\/a></p>";
newtemp_ = newtemp_ + "<p><a target='_blank' href='>"+newtemp[n].url+"'>"+newtemp[n].proname+"<\/a><\/p>";
newtemp_ = newtemp_ + "<p class='pc'>"+newtemp[n].proprice+"<\/p><\/li>";
}
$("#prohistory").html(newtemp_);//我輸出到prohistory這個(gè)div里面
})
- 使用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對象(歷史記錄)使用方法(實(shí)現(xiàn)瀏覽器前進(jìn)后退)
- JavaScript入門教程(7) History歷史對象
- javascript結(jié)合Cookies實(shí)現(xiàn)瀏覽記錄歷史
- JavaScript中的History歷史對象
- javascript-hashchange事件和歷史狀態(tài)管理實(shí)例分析