jquery使用Cookie和JSON记录用户最近浏览历史


Posted in Javascript onApril 19, 2016

在一些电商网站,有“商品浏览历史记录”这一功能,一些视频类、小说类的网站也能记录用户最近的浏览历史。本文将使用Cookie以及JSON来讲解如何实现这一功能。
Cookie可以用来记录客户端用户ID、密码、浏览过的网页、停留的时间等信息,jQuery提供了一个cookie插件,能非常方便的读写cookie信息。
基本流程:
1、获取文章详情页面文章的标题和页面地址;
2、获取浏览历史cookie信息,判断如果浏览历史的cookie中已经存在当前文章的浏览记录,则不进行任何操作;
3、如果浏览历史的cookie中不存在当前文章的浏览记录,则将当前文章的cookie信息(文章标题和页面地址)写入浏览历史的cookie信息中。写入的cookie信息,采用JSON数据格式,便于读取。
4、获取浏览历史cookie信息,遍历JSON数据,分析并输出浏览历史记录。
详解:
1、保证要记录浏览历史的文章详情页面已载入jquery和cookie插件。获取当前文章页面的文章标题和页面地址: 

var art_title = $(".blog_txt h2").text(); //文章标题 
var art_url = document.URL; //页面地址

2、获取用户历史浏览记录,如果已经存在浏览历史,则分析历史记录的cookie信息(JSON数据格式),获取记录长度。

var canAdd = true; //初始可以插入cookie信息 
var hisArt = $.cookie("hisArt"); 
var len = 0; 
if(hisArt){ 
  hisArt = eval("("+hisArt+")"); 
  len = hisArt.length; 
}

3、如果浏览历史cookie信息已经存在,则遍历cookie信息,对比当前文章标题,如果cookie信息中已经存在当前文章标题,则中止程序,不做任何操作。

$(hisArt).each(function(){ 
  if(this.title == art_title){ 
    canAdd = false; //已经存在,不能插入 
    return false; 
  } 
});

4、如果浏览历史cookie中不存在当前文章,则可以像浏览历史cookie中插入当前文章的cookie信息。此时需要构建json数据,将已有的浏览记录cookie和当前页面的cookie信息已经组合成JSON数据,然后通过$.cookie()方法写入到浏览历史记录中。

if(canAdd==true){ 
  var json = "["; 
  var start = 0; 
  if(len>4){start = 1;} 
  for(var i=start;i<len;i++){ 
    json = json + "{\"title\":\""+hisArt[i].title+"\",\"url\":\""+hisArt[i].url+"\"},"; 
  } 
  json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]"; 
  $.cookie("hisArt",json,{expires:1}); 
}

这样,我们就得到了用户的浏览历史记录cookie信息,cookie名称为hisArt,值为JSON格式的数据,如:[{"title":"article1","url":"a.html"},{"title":"article2","url":"b.html"},]
5、接下来,我们就要在需要展示用户浏览历史记录的cookie信息。在本例对应的demo页面,首先要获取浏览历史cookie:hisArt的值,然后分析,遍历,组合成字符串输出到页面,代码如下:

$(function(){ 
  var json = eval("("+$.cookie("hisArt")+")"); 
  var list = ""; 
  for(var i=0; i<json.length;i++){ 
    list = list + "<li><a href='"+json[i].url+"' target='_blank'>"+json[i].title+"</a></li>"; 
  } 
  $("#list").html(list); 
});

我们在demo的页面中放置了一个#list的列表,当然这个页面也需要预先载入jquery库和cookie插件。

以上就是本文的全部内容,希望对大家学习cookie插件有所帮助。

Javascript 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 #Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 #Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 #Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 #Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 #Javascript
深入浅析JavaScript中的constructor
Apr 19 #Javascript
js点击返回跳转到指定页面实现过程
Aug 20 #Javascript
You might like
PHP递归调用的小技巧讲解
2013/02/19 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP运行模式汇总
2016/11/06 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python中元组的用法整理
2020/06/15 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
新年主持词
2014/03/27 职场文书
新学期开学标语
2014/06/30 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python