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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
小程序实现短信登录倒计时
Jul 12 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
SMARTY学习手记
2007/01/04 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
2014年科室工作总结
2014/11/20 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
公司开除员工通知
2015/04/22 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python