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


Posted in Javascript onOctober 23, 2015

本文就是要利用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实现展示浏览网页的历史记录,希望大家喜欢。

Javascript 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
简单的Jquery全选功能
Nov 07 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 #Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 #Javascript
深入浅析javascript立即执行函数
Oct 23 #Javascript
js判断手机号运营商的方法
Oct 23 #Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 #Javascript
js计算文本框输入的字符数
Oct 23 #Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 #Javascript
You might like
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python缩进区别分析
2014/02/15 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python实现微信表情包炸群功能
2021/01/28 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
运动会稿件50字
2014/02/17 职场文书
促销活动总结报告
2014/04/26 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
python之基数排序的实现
2021/07/26 Python