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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
JavaScript实现Excel表格效果
Feb 07 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
php 静态化实现代码
2009/03/20 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
js select常用操作控制代码
2010/03/16 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python中remove函数的踩坑记录
2021/01/04 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
商务英语专业求职信
2014/06/26 职场文书
搞笑的获奖感言
2014/08/16 职场文书
职称评定个人总结
2015/03/05 职场文书
紧急通知
2015/04/17 职场文书
三八节活动主持词
2015/07/04 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
nginx访问报403错误的几种情况详解
2022/07/23 Servers