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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
jQuery实现元素的插入
Feb 27 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
JavaScript伪数组用法实例分析
Dec 22 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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与以太坊交互详解
2018/08/24 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JS delegate与live浅析
2013/12/21 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
python文件写入实例分析
2015/04/08 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python NumPy库安装使用笔记
2015/05/18 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Pycharm Git 设置方法
2020/09/15 Python
python爬虫请求头的使用
2020/12/01 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
医院护理人员的自我评价分享
2013/10/04 职场文书
实习生个人的自我评价
2013/12/08 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
主持人演讲稿范文
2013/12/28 职场文书
中学教师自我鉴定
2014/02/07 职场文书
抽样调查项目计划书
2014/04/24 职场文书
村级个人对照检查材料
2014/08/22 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
工程部部长岗位职责
2015/02/12 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
贷款收入证明范本
2015/06/12 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫