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使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
简述vue状态管理模式之vuex
Aug 29 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
Vue实现可移动水平时间轴
2020/06/29 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python 错误和异常小结
2013/10/09 Python
python爬取网站数据保存使用的方法
2013/11/20 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
Ajax的工作原理
2015/12/04 面试题
入党积极分子自我鉴定
2014/02/18 职场文书
师德模范事迹材料
2014/06/03 职场文书
租房协议书
2014/09/12 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书