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 instanceof 内部机制探析
Oct 15 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
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 万年历实现代码
2012/10/18 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python subprocess模块学习总结
2014/03/13 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python中运行并行任务技巧
2015/02/26 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python验证码识别实例代码
2018/02/03 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
高中生学习生活的自我评价
2013/10/09 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
教师个人师德总结
2015/02/06 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
python中对列表的删除和添加方法详解
2022/02/24 Python