js 实现浏览历史记录示例


Posted in Javascript onApril 20, 2014

先必须要引用一个js jquery.cookie.js

1,首先写入jsCookied

//浏览记录 写入JSCookied 开始 
var img=$("#ProductImgurl").attr("jqimg"); 
var name=$("#ProductDetail_ctl00_LabelName").text(); 
var url=location.href; 
var price=$("#ProductDetail_ctl00_LabelShopPrice").text(); 
var sellcount=$("#ProductDetail_ctl00_lblSaleNumber").text(); 
var hc=img+"|"+name+"|"+url+"|"+price+"|"+sellcount; 
if($.cookie("history")!=null) 
{ 
if($.cookie("history").indexOf(name)==-1) 
{ $.cookie("history",hc+"*"+$.cookie("history"),{expires:8,domain:'.groupfly.com',path:"/"}); 
} 
} 
else 
{ 
$.cookie("history",hc,{expires:8,domain:'.groupfly.com',path:"/"}); 
} 
//浏览记录 写入JSCookied 结束

2,然后再读取Cookied
<script type="text/javascript" charset="utf-8"> 
//读取cookied历史记录 
$(function(){ var hc=$.cookie("history"); 
if(hc!=null) 
{ 
if(hc.indexOf("*")!=-1) 
{ 
var splithtml=hc.split("*"); 
var xhtml=new Array(); 
var hlength=splithtml.length; 
if(parseInt(hlength)>4) 
hlength=4; 
for(var i=0;i<parseInt(hlength);i++) 
{ 
xhtml.push('<div class="tuijian"><div class="tjname"><a href="'+splithtml[i].split("|")[2]+'">'+splithtml[i].split("|")[1].substr(0, 17)+'</a></div>'); 
xhtml.push('<div class="tjimga"><a href="'+splithtml[i].split("|")[2]+'"><img src="'+splithtml[i].split("|")[0]+'_160x160.jpg" alt="'+splithtml[i].split("|")[1]+'" /></a><p>¥'+splithtml[i].split("|")[3]+'</p></div>'); 
xhtml.push('<div class="otherInfo clearfix"><span>已销售<b>'+splithtml[i].split("|")[4]+'</b>笔</span><a href="'+splithtml[i].split("|")[2]+'">再看看</a></div></div>'); 
} 
xhtml.push('<div class="tr"><a href="javascript:clearcookied();">清空记录</a></div>'); 
$("#MyHistory").append(xhtml.join("")); 
} 
else{ 
var xhtml=new Array(); 
xhtml.push('<div class="tuijian"><div class="tjname"><a href="'+hc.split("|")[2]+'">'+hc.split("|")[1].substr(0, 17)+'</a></div>'); 
xhtml.push('<div class="tjimga"><a href="'+hc.split("|")[2]+'"><img src="'+hc.split("|")[0]+'_160x160.jpg" alt="'+hc.split("|")[1]+'" /></a><p>¥'+hc.split("|")[3]+'</p></div>'); 
xhtml.push('<div class="otherInfo clearfix"><span>已销售<b>'+hc.split("|")[4]+'</b>笔</span><a href="'+hc.split("|")[2]+'">再看看</a></div></div>'); 
xhtml.push('<div class="tr"><a href="javascript:clearcookied();">清空记录</a></div>'); 
$("#MyHistory").append(xhtml.join("")); 
} 
} 
else 
{ 
$("#MyHistory").append("<li>暂无浏览记录</li>"); 
} 
}); 
function clearcookied() 
{ 
$.cookie('history',null,{expires:1,domain:'.nrqiang.com'}); 
$("#MyHistory").html("<li>暂无浏览记录</li>"); 
} 
$(function() { 
$("img").each(function(){$(this).attr("src",$(this).attr("original"));}); 
}); 
</script>
Javascript 相关文章推荐
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 #Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 #Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 #Javascript
jQuery响应enter键的实现思路
Apr 18 #Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 #Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 #Javascript
用jquery仿做发微博功能示例
Apr 18 #Javascript
You might like
php模板原理讲解
2013/11/13 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
node内置调试方法总结
2018/02/22 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Python中的面向对象编程详解(下)
2015/04/13 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
建议书怎么写
2014/03/12 职场文书
建筑结构施工求职信
2014/07/11 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS