javascript封装 Cookie 应用接口


Posted in Javascript onAugust 07, 2015

本文章记录本人在学习 Cookie 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。

封装函数

在默认的情况下存取Cookie是一件比较麻烦的事情。由于Cookie是通过字符串来存储信息的,所以容易导致在执行赋值运算的时需要转换读取信息的数据类型。而且Cookie信息的字符串本身就令人讨厌,在经常使用Cookie信息的 Web 应用中格外的不方便。所以需要自行的封装一个Cookie函数来提供开发效率!

定义一个函数Cookie(),这个函数能够写入指定的Cookie信息,删除指定的Cookie信息,也能够读取指定名称的Cookie值,另外,在该函数中还可以制定Cookie信息的有效期、有效路径、作用域和安全性选项设置。完整的代码:

var Cookie = function(name, value, options) {
    // 如果第二个参数存在
    if (typeof value != 'undefined') {
      options = options || {};
      if (value === null) {
        // 设置失效时间
        options.expires = -1;
      }
      var expires = '';
      // 如果存在事件参数项,并且类型为 number,或者具体的时间,那么分别设置事件
      if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
        var date;
        if (typeof options.expires == 'number') {
          date = new Date();
          date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
        } else {
          date = options.expires;
        }
        expires = '; expires=' + date.toUTCString();
      }
      var path = options.path ? '; path=' + options.path : '', // 设置路径
        domain = options.domain ? '; domain=' + options.domain : '', // 设置域 
        secure = options.secure ? '; secure' : ''; // 设置安全措施,为 true 则直接设置,否则为空

      // 把所有字符串信息都存入数组,然后调用 join() 方法转换为字符串,并写入 Cookie 信息
      document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
    } else { // 如果第二个参数不存在
      var CookieValue = null;
      if (document.cookie && document.cookie != '') {
        var Cookie = document.cookie.split(';');
        for (var i = 0; i < Cookies.length; i++) {
          var Cookie = (Cookie[i] || "").replace( /^\s+|\s+$/g, "");
          if (Cookie.substring(0, name.length + 1) == (name + '=')) {
            CookieValue = decodeURIComponent(Cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return CookieValue;
    }
  };

如何使用

写入Cookie信息:

// 简单写入一条 Cookie 信息
cookie("user", "baidu");
// 写入一条 Cookie 信息,并且设置更多选项
cookie("user", "baidu", {
  expires: 10, // 有效期为 10 天
  path: "/", // 整个站点有效
  domain: "www.baidu.com", // 有效域名
  secure: true // 加密数据传输
});

2.读取Cookie信息:

cookie("user");

3.删除Cookie信息:

cookie("user", null);

再给大家分享一个封装好的代码

//向cookie写入数据
function writeCookie(name, value, days) {
 // 定义有效日期(cookie的有效时间)
 var expires = "";

 // 为有效日期赋值
 if (days) {
  var date = new Date();
	//设置有效期(当前时间+时间段)
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));//时间段为毫秒数 
  expires = "; expires=" + date.toGMTString();
 }

 // 给cookie赋值 name, value和expiration date(有效期)
 document.cookie = name + "=" + value + expires + "; path=/";
}
//读取cookie数据
function readCookie(name) {
 var searchName = name + "=";
 var cookies = document.cookie.split(';');
 for(var i=0; i < cookies.length; i++) {
  var c = cookies[i];
  while (c.charAt(0) == ' ')
   c = c.substring(1, c.length);
  if (c.indexOf(searchName) == 0)
   return c.substring(searchName.length, c.length);
 }
 return null;
}
//清楚所有的cookie
function eraseCookie(name) {
 // 将时间设置成-1将清除存储在cookie中的数据
 writeCookie(name, "", -1);
}

最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!

Javascript 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
再谈javascript原型继承
Nov 10 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
JavaScript Date对象详解
Mar 01 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 #Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 #Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 #Javascript
C++中的string类的用法小结
Aug 07 #Javascript
Grunt入门教程(自动任务运行器)
Aug 06 #Javascript
You might like
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python如何爬取个性签名
2018/06/19 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
公务员总结性个人自我评价
2013/12/05 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
城管大队整治方案
2014/05/06 职场文书
开除通知书范本
2015/04/25 职场文书
民事申诉状范本
2015/05/20 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python