通过Jquery.cookie.js实现展示浏览网页的历史记录超管用

 更新时间:2015年10月23日 11:48:18   投稿:mrr  
本文给大家分享利用cookie插件获取用户浏览文章或者是网页的历史记录,并把用户最近浏览过的信息显示在页面,涉及到 jquery.cookie.js相关知识,感兴趣的朋友可以参考下

本文就是要利用cookie插件,获取用户浏览文章历史记录,并将用户最近浏览历史记录显示在页面。

在需要添加cookie的页面加上如下js

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
 <script type="text/javascript">
 $(function(){
 var art_title = $("title").html();
 var art_url = document.URL;
 var history;
 var json="[";
 //json1是第一次注入cookie以后的第一个json,"此时还不是数组" 以点带面的处理
 var json1;
 var canAdd= true;
 //var json1=eval("({sitename:'dreamdu',sitedate:new Date(1980, 12, 17, 12, 0, 0)})");
 if(!$.cookie("history")){
 //第一次的时候需要初始化
 history = $.cookie("history","{title:\""+art_title+"\""+",url:\""+art_url+"\"}");
 }else {
 //已经存在
 history = $.cookie("history");
 json1 = eval("("+history+")");
 $(json1).each(function(){
  if(this.title==art_title){
  canAdd=false;
  return false;
  }
 })
 if(canAdd){
  $(json1).each(function(){
  json = json + "{\"title\":\""+this.title+"\",\"url\":\""+this.url+"\"},";
  })
  json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]"; 
  $.cookie("history",json,{expires:1});
 }
 }
 })
 </script>

在展示历史记录的页面添加如下js

<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
 <script type="text/javascript">
 $(function(){ 
 if($.cookie("history")){
 var json = eval("("+$.cookie("history")+")"); 
 var list =""; 
 $(json).each(function(){
  list = list + "<li><a href='"+this.url+"' target='_blank'>"+this.title+"</a></li>";
  alert(this.url);
 })
 $("#list").html(list);;
 } 
 }); 
 </script>
 </head>

以上内容是小编给大家分享的通过Jquery.cookie.js实现展示浏览网页的历史记录,希望大家喜欢。

相关文章

  • jquery中实现简单的tabs插件功能的代码

    jquery中实现简单的tabs插件功能的代码

    jquery改变了程序员写javascript的方式。作为jquery的爱好者和新手,最近我学会了用寥寥几句jquery代码实现类似tabs插件的功能,相信此文能为许多刚入门的jquery爱好者和想实现tabs插件功能的朋友带来一些帮助。
    2011-03-03
  • Jquery Ajax学习实例 向页面发出请求,返回XML格式数据

    Jquery Ajax学习实例 向页面发出请求,返回XML格式数据

    Jquery Ajax学习实例 向页面发出请求,返回XML格式数据的代码
    2010-03-03
  • jQuery实现仿微软首页感应鼠标变化滑动窗口效果

    jQuery实现仿微软首页感应鼠标变化滑动窗口效果

    这篇文章主要介绍了jQuery实现仿微软首页感应鼠标变化滑动窗口效果,基于jQuery响应鼠标事件简单实现动画效果,非常简单实用,需要的朋友可以参考下
    2015-10-10
  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    这篇文章主要介绍了jQuery实现带动画效果的多级下拉菜单代码,可实现点击渐隐渐显效果,涉及jQuery页面元素的遍历及链式操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery动画效果实现图片无缝连续滚动

    jQuery动画效果实现图片无缝连续滚动

    这篇文章主要为大家介绍了jQuery动画效果实现图片无缝连续滚动,实现类似连续不间断的滚动广告位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jquery实现百叶窗效果

    jquery实现百叶窗效果

    本文主要分享了jquery实现百叶窗效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • jQuery解析Json实例详解

    jQuery解析Json实例详解

    这篇文章主要介绍了jQuery解析Json的方法,结合实例形式较为详细的分析了jQuery针对json的常用解析与转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • jQuery DIV弹出效果实现代码

    jQuery DIV弹出效果实现代码

    现在很多网站都流行这种弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。
    2009-07-07
  • jquery实现图片裁剪思路及实现

    jquery实现图片裁剪思路及实现

    JS,jquery不能实现图片的裁剪,只是显示了一个假象,在服务器上用获得的各个坐标值,以及原始图片,用JAVA进行裁剪
    2013-08-08
  • 基于jquery步骤进度条源码分享

    基于jquery步骤进度条源码分享

    本文给大家分享基于jquery步骤进度条源码分享,实现功能是这样的,在输入框中输入第3步,点击重新生成按钮,相应的步骤颜色就会加深,对jquery步骤进度条感兴趣的朋友一起看看吧
    2015-11-11

最新评论