当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 历史记录 经常用于产品最近历史浏览

Javascript
用Javascript 实现的Dual listbox
javascript中的数组应用的一点发现
我与Javascript 随笔(二)
关于IP验证的一个例子
JS中关于对内存的释放问题[待续]
用JScript实现公历到农历的日期转换
判断输入字符串为颜色类型的最优方法
日期控件还是看看这个吧
javascript版的日期输入控件
可输入的select改进版本,同一页面可有多个list,调用接口简化
数字金额转换汉字金额
关于四舍五入的问题,toFixed()
Select的OnChange()事件
关于javascript树形结构的编写问题
将人民币数字转换成大写形式
用JavaScript实现动画效果
javascript: 改变和控制显示的图片大小(保持比例,同时可限制高宽)
超强幻灯片播放脚本(VBS)
HTML页面如何象asp一样接受参数
数字日期转化为汉字日期格式...

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 367 ::
收藏到网摘: n/a

在很多购物网站,都有“产品的浏览历史记录”,这是个很贴心的功能。
本文将用js+cookie来实现这一功能,因为最近都在研究jquery,所以也就顺便用上了,如果你不想用jquery,那么你更需要了解实现的过程就可以了,代码自己去写。
需要用到一个jquery的cookie插件,用来操作cookie,连接http://www.ruanchen.com/"codetitle">复制代码 代码如下:
下面通过代码讲解:
复制代码 代码如下:

$(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里面
})

评论 (0) All

登陆 还没注册?