jquery.cookie.js用法实例详解


Posted in Javascript onDecember 25, 2015

本文实例讲述了jquery.cookie.js用法。分享给大家供大家参考,具体如下:

对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤,这样大大方便了客户,也增加了客户对网站的回头率。

jquery.cookie.js 提供了jquery中非常简单的操作cookie的方法。

$.cookie('the_cookie'); // 获得cookie
$.cookie('the_cookie', 'the_value'); // 设置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等

这个插件默认的过期是按天数计算的,我们可以修改下,按毫秒计算,修改如下:

if (typeof options.expires === 'number') {
   //var days = options.expires, t = options.expires = new Date();
   //t.setDate(t.getDate() + days);
   var seconds = options.expires, t = options.expires = new Date();
   t.setTime(t.getTime() + seconds);
   //t.setTime(t.getTime() + days);
   //date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
}

下面举个简单的例子:我们需要对某个页面进行阅读统计,但是呢,在一段时间里(比如5分钟),同一个人无论刷新了这个页面多少次都好,都只能算一次。这个时候可以借助cookie来实现:

<script language="javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script language="javascript" src="/js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript">
 // 页面类型,标识一组页面
 var pageType = 20110420;
 // 页面id,标识唯一一个页面
 var url = window.location.href;
 var url_arr = url.split(".");
 var id = url_arr[url_arr.length - 2];
 //var id = 2;
 //var cookie = $.cookie('the_cookie'+id, true, { expires: 5/24/60/60 });
 $(document).ready(function(){
  init_count(pageType, id);
 })
 // 初始化数据,同一个cookie一分钟的访问量都算一次
 function init_count(pageType, id){
  if($.cookie('the_cookie'+id)){
   //alert("cookie已存在");
   getViewData(pageType, id);
  }
  else
  {
   // 1分钟过期
   var cookie = $.cookie('the_cookie'+id, 'Gonn', { expires: 1000 * 60 * 5 });
   //$.cookie('the_cookie'+id, 'Gonn');
   //var cookie = $.cookie('the_cookie'+id);
   //alert(cookie);
   insert_page(pageType, id);
  }
 }
 // 不插入与更新时统计访问量
 function getViewData(pageType, id){
  $.ajax({
   type: "get",  //使用get方法访问后台
   dataType: "jsonp", //返回json格式的数据
   jsonp:"callback",
   url: "/manage.php", //要访问的后台地址
   data:{"opp":"view", "pageType":pageType, "id":id},
   async: false,
   success: function(data){
    //alert(data.total);
    $('#pc_1').html(data.total);
    $('#pcm_1').html(data.record);
   }
  })
 }
 // 插入或者更新页面统计
 function insert_page(pageType, id){
  var j = null;
  $.ajax({
   type: "get",  //使用get方法访问后台
   dataType: "jsonp", //返回json格式的数据
   jsonp:"callback",
   url: "/manage.php", //要访问的后台地址
   data:{"opp":"insert", "pageType":pageType, "id":id},
   async: false,
   success: function(data){
    //alert(msg.current);
    //alert(msg.record);
    j = data;
    //alert("111");
    //alert(j.total);
    $('#pc_1').html(data.total);
    $('#pcm_1').html(data.record);
   }
  })
 }
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
微信小程序反编译的实现
Dec 10 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
理解javascript中try...catch...finally
Dec 25 #Javascript
javascript实现简单加载随机色方块
Dec 25 #Javascript
学习JavaScript鼠标响应事件
Dec 25 #Javascript
理解javascript中DOM事件
Dec 25 #Javascript
理解JavaScript中worker事件api
Dec 25 #Javascript
基于jquery实现省市区三级联动效果
Dec 25 #Javascript
js实现文本框输入文字个数限制代码
Dec 25 #Javascript
You might like
谈谈PHP语法(3)
2006/10/09 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP中each与list用法分析
2016/01/08 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python Pygame的具体使用讲解
2017/11/03 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
pyspark 随机森林的实现
2020/04/24 Python
Python 中如何写注释
2020/08/28 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
日语求职信范文
2013/12/17 职场文书
征兵宣传标语
2014/06/20 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python