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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
学习vue.js条件渲染
Dec 03 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
实例讲解v-if和v-show的区别
Jan 31 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python实现ip查询示例
2014/03/26 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
自我反省检讨书
2014/01/23 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
铅球加油稿100字
2014/09/26 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2014年督导工作总结
2014/11/19 职场文书