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 相关文章推荐
图片之间的切换
Jun 26 Javascript
一个JavaScript继承的实现
Oct 24 Javascript
兼容Mozilla必须知道的知识。
Jan 09 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
react使用CSS实现react动画功能示例
May 18 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP钩子实现方法解析
2019/05/21 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
大学军训感言600字
2014/02/25 职场文书
小学数学国培感言
2014/03/10 职场文书
质量月活动策划方案
2014/03/10 职场文书
预备党员承诺书
2014/03/25 职场文书
公关活动策划方案
2014/05/25 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
文秘自荐信
2014/06/28 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
MySQL 5.7常见数据类型
2021/07/15 MySQL