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 26 Javascript
理解JavaScript中的事件
Sep 23 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
js对象的比较
2011/02/26 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python从入门到精通(DAY 2)
2015/12/20 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python中logging日志库实例详解
2020/02/19 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
绵山导游词
2015/02/05 职场文书
2015年统战工作总结
2015/05/19 职场文书