通过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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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 adodb分页实现代码
2009/03/19 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
保密承诺书
2014/03/27 职场文书
医院义诊活动总结
2014/07/04 职场文书
高中生毕业评语
2014/12/30 职场文书
负责培养人意见
2015/06/05 职场文书
学籍证明模板
2015/06/18 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS