通过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 24 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
node.js域名解析实现方法详解
Nov 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
在PHP中执行系统外部命令
2006/10/09 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
javascript Object与Function使用
2010/01/11 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
python RSA加密的示例
2020/12/09 Python
违反课堂纪律检讨书
2014/01/19 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android