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地理位置
Nov 25 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
node.js操作mysql简单实例
May 25 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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发电子邮件
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
jQuery使用手册之一
2007/03/24 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python sys.argv用法实例
2015/05/28 Python
遗传算法之Python实现代码
2017/10/10 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
结束运行python的方法
2020/06/16 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
八荣八耻演讲稿
2014/09/15 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
V Rising 服务器搭建图文教程
2022/06/16 Servers