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

Javascript
自己开发Dojo的建议框架
js每次Title显示不同的名言
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
无限级别的菜单(侧拉菜单)
点选TOP后并不是直接跳到页顶的,而是滚动上去
js下拉菜单中自动信息轮换播放
英文首字母全大写的js实现脚本
实例区别onClick和onDBClick两事件方法
改变文本框字体颜色的js脚本
js星空效果代码
判断li是否有样式的js代码
文本框点击时文字消失,失去焦点时文字出现
如何让一个层关闭之后,就算刷新页面了也不显示。除非关闭页面再次打开
右下角弹出窗口效果代码
JS控制对象移动效果
验证用户是否修改过页面的数据的实现方法
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
EXT富客户端后台管理系统 初步代码
不同浏览器javascript变量作用域的处理方法

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


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

登陆 还没注册?