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 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
JavaScript中string对象
Jun 12 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
通过循环优化 JavaScript 程序
Jun 24 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
vue调用语音播放的方法
Sep 27 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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
PHP5 面向对象程序设计
2008/02/13 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
php的常量和变量实例详解
2017/06/27 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
常用DOM整理
2015/06/16 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Python中的变量和作用域详解
2016/07/13 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python得到电脑的开机时间方法
2018/10/15 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
CSS3 边框效果
2019/11/04 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
门诊手术室工作制度
2014/01/30 职场文书
青年教师培训方案
2014/02/06 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
党课培训心得体会
2014/09/02 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
教你nginx跳转配置的四种方式
2022/07/07 Servers