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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
javascript实现获取字符串hash值
May 10 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
js数组实现权重概率分配
Sep 12 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
JavaScript canvas实现流星特效
May 20 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
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
range 标准化之获取
2011/08/28 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
JS实现滑动插件
2020/01/15 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python日志模块logging简介
2015/04/13 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python如何导入依赖包
2020/07/13 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
客户代表自我评价范例
2013/09/24 职场文书
民族学专业求职信
2014/07/28 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
图解上海144收音机
2021/04/22 无线电
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL