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

Javascript
ExtJs 3.1 XmlTreeLoader Example Error
JQuery 获得绝对,相对位置的坐标方法
JQUERY操作JSON实例代码
基于Jquery的简单&简陋Tabs插件代码
jQuery插件 tabBox实现代码
JavaScript Event学习第十章 一些可替换的事件对
JavaScript Event学习第十一章 按键的检测
一段实现页面上的图片延时加载的js代码
我遇到的参数传递中 双引号单引号嵌套问题
Extjs学习过程中新手容易碰到的低级错误积累
JavaScript 输入框内容格式验证代码
JavaScript Event学习补遗 addEventSimple
jquery实现的提示浮层跟随鼠标移动
jQuery 添加/移除CSS类实现代码
jQuery 改变CSS样式基础代码
改善你的jQuery的25个步骤 千倍级效率提升
jquery 问答知识整理
Jquery iframe内部出滚动条
不同浏览器对回车提交表单的处理办法
Javascript 浏览器事件小结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 394 ::
收藏到网摘: 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

登陆 还没注册?