通过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 相关文章推荐
JS高级笔记
Jul 13 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
原生js实现密码强度验证功能
Mar 18 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 session 预定义数组
2009/03/16 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php长字符串定义方法
2012/07/12 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
JSONP跨域请求
2017/03/02 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
Python多进程multiprocessing用法实例分析
2017/08/18 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
如何写python的配置文件
2020/06/07 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
实习自我鉴定模板
2013/09/28 职场文书
网络营销计划书
2015/01/17 职场文书
2015年度团总支工作总结
2015/04/23 职场文书