javascript 歷史記錄 經常用于產品最近歷史瀏覽第1/2頁
更新時間：2009年05月26日 02:22:55 作者：
在很多購物網站，都有“產品的瀏覽歷史記錄”，這是個很貼心的功能。
本文將用js+cookie來實現(xiàn)這一功能，因為最近都在研究jquery，所以也就順便用上了，如果你不想用jquery，那么你更需要了解實現(xiàn)的過程就可以了，代碼自己去寫。
需要用到一個jquery的cookie插件，用來操作cookie，連接http://m.fzitv.net/article/18276.htm
需要稍微了解json，資料使用json然為了簡單，這里假設瀏覽記錄只記錄3個。
基本流程如下：
1、如果cookie中記錄的歷史產品數(shù)目為0或1或2，那么直接在cookie中插入。
2、如果cookie中記錄的數(shù)目為3(因為我們限定了只能記錄3個)，那么將第一組記錄的去掉，去掉的方法是重新遍歷，但不從第一個開始，而從第二個開始，再插入新的歷史記錄。
準備：
1、我們要存進去cookie的json字符串類似如下：
復制代碼 代碼如下:
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：是產品的頁面url
imgurl：是圖片的url
proname：產品名稱
proprice：產品價格
2、如何取得這些信息？下面以京東商城為例子：
我們需要取得的就是上面“黃色區(qū)域”部分，還有一個是頁面地址。查看其代碼，定位到關鍵部分的代碼塊如下：
<div class="Product_Name"><h1>惠普（HP）Deskjet D2568 彩色噴墨照片打印機</h1><font color="#FF0000" >勁爆價格 雙墨滴打印技術還原照片本色 </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 彩色噴墨照片打印機" 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
京東的價格是做成圖片的：
<ul class="Pro_baseinfo"><li><em class="grey">商品編號：131407</em></li><li>市 場 價：<em class="m_line">￥499.00</em></li><li>京 東 價：<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"">(降價通知我)</a>
用jquery取得我們需要的信息：
復制代碼 代碼如下:
$(function(){
var pro_url = document.URL;//頁面地址
var pro_name = $(".Product_Name h1").text();//產品名稱
var pro_img = $("#Product_BigImage img")[0].src;//圖片路徑
var pro_price = $(".Pro_baseinfo li").eq(2).children("img")[0].src;//價格
})
補充：這里京東的比較復雜一點，而我們如果是自己寫的程序可以給一個要獲取的元素一個id。
演示獲取(請“運行代碼”后刷新一次)：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- 使用JS location實現(xiàn)搜索框歷史記錄功能
- JS返回頁面時自動回滾到歷史瀏覽位置
- jquery使用Cookie和JSON記錄用戶最近瀏覽歷史
- 通過Jquery.cookie.js實現(xiàn)展示瀏覽網頁的歷史記錄超管用
- js 實現(xiàn)瀏覽歷史記錄示例
- javascript history對象(歷史記錄)使用方法(實現(xiàn)瀏覽器前進后退)
- JavaScript入門教程(7) History歷史對象
- javascript結合Cookies實現(xiàn)瀏覽記錄歷史
- JavaScript中的History歷史對象
- javascript-hashchange事件和歷史狀態(tài)管理實例分析
相關文章
在一個客戶的case中遇到需要在SharePoint Calendar試圖里面根據一定的規(guī)則來顯示或者隱藏記錄，為了取得記錄的handle，可以通過超鏈接選擇器來查找2011-05-05
jQuery-Easyui 1.2 實現(xiàn)多層菜單效果的代碼
早上打開郵箱，一位朋友問我之前JQuery-Easyui 怎么做可以實現(xiàn)多級菜單2012-01-01
js整數(shù)字符串轉換為金額類型數(shù)據(示例代碼)
本篇文章主要是對js整數(shù)字符串轉換為金額類型數(shù)據的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jQuery自帶的一些常用方法總結,包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以參考下2014-09-09
jquery 將當前時間轉換成yyyymmdd格式的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 將當前時間轉換成yyyymmdd格式的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考2016-06-06
簡單的jQuery拖拽排序效果的實現(xiàn)(增強動態(tài))
這篇文章主要介紹了簡單的jQuery拖拽排序效果的實現(xiàn)(增強),增強動態(tài)增加div效果，代碼簡單，很容易實現(xiàn)，需要的朋友可以參考下2017-02-02
jquery復選框全選/取消示例,實現(xiàn)點擊復選框的時候全選所有的子復選框，再點擊取消所有復選框的選中狀態(tài)2013-12-12
jQuery.Sumoselect插件實現(xiàn)下拉復選框效果
jquery.sumoselect是一款跨設備、跨瀏覽器的jQuery下拉列表框插件。接下來通過本文給大家分享jQuery.Sumoselect插件實現(xiàn)下拉復選框效果，需要的朋友參考下吧2017-11-11
jQuery 獲取跨域XML(RSS)數(shù)據的相關總結分析
下面小編就為大家?guī)硪黄猨Query 獲取跨域XML(RSS)數(shù)據的相關總結分析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄猨query設置css樣式的多種方法(總結)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02