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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JS控制输入框内字符串长度
May 21 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
Angular排序实例详解
Jun 28 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 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
PHP开发中四种查询返回结果分析
2011/01/02 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
判断网页编码的方法python版
2016/08/12 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
2014年评职称工作总结
2014/11/20 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
小学优秀教师材料
2014/12/15 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
python简单验证码识别的实现过程
2021/06/20 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android
Java实现注册登录跳转
2022/06/16 Java/Android