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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue params、query传参使用详解
Sep 12 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
坏狼的PHP学习教程之第2天
2008/06/15 PHP
php随机显示图片的简单示例
2014/02/15 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
js常用排序实现代码
2010/12/28 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
浅析使用Python操作文件
2017/07/31 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
浅析python中的del用法
2020/09/02 Python
python Pexpect模块的使用
2020/12/25 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
开放系统互连参考模型
2016/06/29 面试题
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python
python开发制作好看的时钟效果
2022/05/02 Python