管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

javascript 历史记录 经常用于产品最近历史浏览

javascript 历史记录 经常用于产品最近历史浏览

　　本文将用js+cookie来实现这一功能，因为最近都在研究jquery，所以也就顺便用上了，如果你不想用jquery，那么你更需要了解实现的过程就可以了，代码自己去写。

　　需要用到一个jquery的cookie插件，用来操作cookie，连接http://www.glzy8.com/article/18276.htm

　　需要稍微了解json，资料使用json然为了简单，这里假设浏览记录只记录3个。

　　基本流程如下：

　　1、如果cookie中记录的历史产品数目为0或1或2，那么直接在cookie中插入。

　　2、如果cookie中记录的数目为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、如何取得这些信息？下面以京东商城为例子：

javascript 历史记录 经常用于产品最近历史浏览

　　我们需要取得的就是上面“黄色区域”部分，还有一个是页面地址。查看其代码，定位到关键部分的代码块如下：

<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需刷新才能执行]

　　下面通过代码讲解：

　　

复制代码 代码如下:

　　$(function(){//ready后再获取

　　//第一步取得需要写入cookie的内容

　　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;//价格

　　var canAdd = true;//默认可以插入

　　//第二步，取得cookie并取得已有历史记录产品数目,对于cookie的操作，这里用了jquery的一个插件，你不喜欢，可以用自己的

　　var hisProduct = $.cookie('hisProduct');

　　var len = 0;

　　if(hisProduct){

　　hisProduct = eval('('+hisProduct+')');//静普通字符串转换成json

　　len = hisProduct.length;

　　}

　　//第三步，判断当前页面的产皮是否已经在记录中，用产品名称去比较

　　$(hisProduct).each(function(i){

　　if(this.proname == pro_name){

　　canAdd = false;//已经存在

　　return;

　　}

　　})

　　//第四步，可以添加的话。

　　if(canAdd){

　　var temp = "[";

　　var startNum = 0;

　　if(len > 2){startNum = 1;}//如果已经记录产品>2，前面说了，最多3个产品，所以这里其实是3，那么不需要第一个产品的记录

　　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这个div里面

　　})

教程首页 更多教程