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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
JS闭包经典实例详解
Dec 20 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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扩展图文教程
2008/12/12 PHP
php验证码生成代码
2015/11/11 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python中可以声明变量类型吗
2020/06/18 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
幼儿园中秋节活动反思
2014/02/16 职场文书
给领导的检讨书
2014/02/16 职场文书
运动会演讲稿50字
2014/08/25 职场文书
生活小常识广播稿
2015/08/19 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers