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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
javascript demo 基本技巧
Dec 18 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 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
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
js实现下一页页码效果
2017/03/07 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
Python装饰器结合递归原理解析
2020/07/02 Python
幼儿园大班评语大全
2014/04/17 职场文书
个人租房协议书样本
2014/10/01 职场文书
企业年检委托书范本
2014/10/14 职场文书
生产现场禁烟通知
2015/04/23 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
聊聊Python String型列表求最值的问题
2022/01/18 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA