|
|
本文將用js+cookie來(lái)實(shí)現(xiàn)這一功能，因?yàn)樽罱荚谘芯縥query，所以也就順便用上了，如果你不想用jquery，那么你更需要了解實(shí)現(xiàn)的過(guò)程就可以了，代碼自己去寫(xiě)。
需要用到一個(gè)jquery的cookie插件，用來(lái)操作cookie，連接http://www.jb51.NET/article/18276.htm
需要稍微了解json，資料使用json然為了簡(jiǎn)單，這里假設(shè)瀏覽記錄只記錄3個(gè)。
基本流程如下：
1、如果cookie中記錄的歷史產(chǎn)品數(shù)目為0或1或2，那么直接在cookie中插入。
2、如果cookie中記錄的數(shù)目為3(因?yàn)槲覀兿薅酥荒苡涗?個(gè))，那么將第一組記錄的去掉，去掉的方法是重新遍歷，但不從第一個(gè)開(kāi)始，而從第二個(gè)開(kāi)始，再插入新的歷史記錄。
準(zhǔn)備：
1、我們要存進(jìn)去cookie的json字符串類(lèi)似如下：
復(fù)制代碼 代碼如下:
var hisProduct = eval[
{"url":"1.html","imgurl":"1.jpg","proname":"pig1","proprice":100},
{"url":"2.html","imgurl":"2.jpg","proname":"pig2","proprice":200},
{"url":"3.html","imgurl":"3.jpg","proname":"pig3","proprice":300}
];
url：是產(chǎn)品的頁(yè)面url
imgurl：是圖片的url
proname：產(chǎn)品名稱(chēng)
proprice：產(chǎn)品價(jià)格
2、如何取得這些信息？下面以京東商城為例子：
我們需要取得的就是上面“黃色區(qū)域”部分，還有一個(gè)是頁(yè)面地址。查看其代碼，定位到關(guān)鍵部分的代碼塊如下： <div class="Product_Name"><h1>惠普（HP）Deskjet D2568 彩色噴墨照片打印機(jī)</h1><font color="#FF0000" >勁爆價(jià)格 雙墨滴打印技術(shù)還原照片本色 </font></div>
<div id="Product_BigImage" class="jqzoom" onclick = "window.open('http://www.360buy.com/bigimage.ASPx?id=131407')"><img onerror = "this.src='http://www.360buy.com/images/none/none_347.gif'" alt="惠普（HP）Deskjet D2568 彩色噴墨照片打印機(jī)" src="http://img10.360buy.com/S1/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg" width="349" jqimg="http://img10.360buy.com/S0/809/8b2bf92f-74f9-46c2-929d-f47fa6fce2d1.jpg"/></div
京東的價(jià)格是做成圖片的：
<ul class="Pro_baseinfo"><li><em class="grey">商品編號(hào)：131407</em></li><li>市 場(chǎng) 價(jià)：<em class="m_line">￥499.00</em></li><li>京 東 價(jià)：<img onerror = "this.src='http://www.360buy.com/images/no2.gif'" src ="http://price.360buy.com/P7EDAD82DC8D8212393096333144388F6,3.png"/><a target="_blank" class="link_1" href="http://jd2008.360buy.com/notify.ASPx?id=131407&type=1&key=7EDAD82DC8D8212393096333144388F6"">(降價(jià)通知我)</a>
用jquery取得我們需要的信息：
復(fù)制代碼 代碼如下:
$(function(){
var pro_url = document.URL;//頁(yè)面地址
var pro_name = $(".Product_Name h1").text();//產(chǎn)品名稱(chēng)
var pro_img = $("#Product_BigImage img")[0].src;//圖片路徑
var pro_price = $(".Pro_baseinfo li").eq(2).children("img")[0].src;//價(jià)格
})
補(bǔ)充：這里京東的比較復(fù)雜一點(diǎn)，而我們?nèi)绻亲约簩?xiě)的程序可以給一個(gè)要獲取的元素一個(gè)id。
演示獲取(請(qǐng)“運(yùn)行代碼”后刷新一次)：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
JavaScript技術(shù)：javascript 歷史記錄 經(jīng)常用于產(chǎn)品最近歷史瀏覽第1/2頁(yè)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
