js 实现浏览历史记录示例

 更新时间:2014年04月20日 14:35:15   作者:  
这篇文章主要介绍了如何使用js实现浏览历史记录,需要的朋友可以参考下
先必须要引用一个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操作select参考代码

    javascript操作select参考代码

    用js控制select的方法,大家可以参考下
    2008-06-06
  • javascript中的变量是传值还是传址的?

    javascript中的变量是传值还是传址的?

    一门编程语言的核心是数据结构,粗略来讲,可以把数据结构分成不可变类型(immutable)和可变类型(mutable)。
    2010-04-04
  • JavaScript代码异常监控实现过程详解

    JavaScript代码异常监控实现过程详解

    这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JS绑定事件的3种方法举例示范(简单易懂)

    JS绑定事件的3种方法举例示范(简单易懂)

    在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如事件绑定、事件监听、事件委托(事件代理)等,这篇文章主要给大家介绍了关于JS绑定事件的3种方法,需要的朋友可以参考下
    2023-11-11
  • Uniapp中嵌入H5并在H5中跳转到APP的指定页面方法详解

    Uniapp中嵌入H5并在H5中跳转到APP的指定页面方法详解

    Uniapp是一款基于Vue.js框架的跨平台开发工具,支持在一套代码中开发出运行于各大平台的应用程序,这篇文章主要给大家介绍了关于Uniapp中嵌入H5并在H5中跳转到APP的指定页面的相关资料,需要的朋友可以参考下
    2023-09-09
  • JS实现的简单表单验证功能示例

    JS实现的简单表单验证功能示例

    这篇文章主要介绍了JS实现的简单表单验证功能,涉及javascript针对表单提交内容的获取、判断、焦点设置等相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Typescript中extends关键字的基本使用

    Typescript中extends关键字的基本使用

    extends表示具体的泛型类型只能是object类型,某个变量如果能断言成object类型[变量as object],那么这个变量的类型符合T extends object,下面这篇文章主要给大家介绍了关于Typescript中extends关键字基本使用的相关资料,需要的朋友可以参考下
    2022-08-08
  • 通过实例解析js可枚举属性与不可枚举属性

    通过实例解析js可枚举属性与不可枚举属性

    这篇文章主要介绍了通过实例解析js可枚举属性与不可枚举属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • javascript使用call调用微信API

    javascript使用call调用微信API

    这篇文章主要介绍了javascript使用call调用微信API,需要的朋友可以参考下
    2014-12-12
  • Bootstrap 3多级下拉菜单实例

    Bootstrap 3多级下拉菜单实例

    这篇文章主要为大家详细介绍了Bootstrap 3多级下拉菜单实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论