JavaScript数据存储 Cookie篇


Posted in Javascript onJuly 02, 2016

1.什么是cookie?
    答:cookie是用于在客户端存储会话信息的。
2.cookie的组成部分?
    ①名称:一个唯一确定cookie 的名称。建议区分大小写。cookie 的名称必须是经过URL 编码的。
    ②值:储存在cookie 中的字符串值。值必须被URL 编码。
    ③域:cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie 信息。这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.com,则对于wrox.com的所有子域都有效)。如果没有明确设定,那么这个域会被认作来自设置cookie 的那个域。
    ④路径:对于指定域中的那个路径,应该向服务器发送cookie。例如,你可以指定cookie 只有从http://www.wrox.com/books/ 中才能访问,那么http://www.wrox.com 的页面就不会发送cookie 信息,即使请求都是来自同一个域的。
    ⑤失效时间:表示cookie 何时应该被删除的时间戳。默认情况下,浏览器会话结束时即将所有cookie 删除;不过也可以自己设置删除时间。这个值是个GMT 格式的日期(Wdy, DD-Mon-YYYY HH:MM:SS GMT),用于指定应该删除cookie 的准确时间。因此,cookie
    可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间,则cookie 会被立刻删除。
    ⑥安全标志:指定后,cookie 只有在使用SSL 连接的时候才发送到服务器。例如,cookie 信息只能发送给https://www.wrox.com,而http://www.wrox.com 的请求则不能发送cookie。
3.列举一个cookie的例子?
    以下是一个完整的cookie的例子,我们将把它分解开来:
    Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
    ①名称: name字符串表示
    ②值:value字符串表示
    ③过期时间:Mon, 22-Jan-07 07:10:24 GMT
    ④域名:.wrox.com
    ⑤路径:当前目录/
    ⑥安全标志:secure
4.如何操作cookie?
 

var CookieUtil = {
    // 设置cookie
    set : function (name, value, expires, domain, path, secure) {
      var cookieText = "";
      cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value);
      if (expires instanceof Date) {
        cookieText += "; expires=" + expires.toGMTString();
      }
      if (path) {
        cookieText += "; path=" + path;
      }
      if (domain) {
        cookieText += "; domain=" + domain;
      }
      if (secure) {
        cookieText += "; secure";
      }
      document.cookie = cookieText;
    },
    // name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
    // 获取cookie
    get : function (name) {
      var cookieName = encodeURIComponent(name) + "=",
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = "";
      if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf (";", cookieStart);
        if (cookieEnd == -1) {
          cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
      }
      return cookieValue; 
    },
    // 删除cookie
    unset : function (name, domain, path, secure) {
      this.set(name, "", Date(0), domain, path, secure);
    }
  };
  // 测试
  CookieUtil.set("name", "zhang");
  var name = CookieUtil.get("name");
  alert(name);  // zhang
  CookieUtil.unset("name");
  alert(CookieUtil.get("name")); // 空

5.cookie的限制
    ①存储数据数量有限
    ②保了储存在cookie 中的信息只能让批准的接受者访问,而无法被其他域访问
    ③安全性有限
6.针对cookie数据存储少量的问题,我们提出了子cookie的概念。即在每条cookie的值中存储多条数据,用"&"隔开。

var SubCookieUtil = {
    /** 设置一条完整的cookie
    *  param name : 表示cookie的名称,必填
    *  param subCookies : 表示cookie的值,为一个对象,必填
    *  param expires : 表示cookie的过期时间,可以不填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路径,可以不填
    *  param secure : 表示cookie的安全标志,可以不填
    *  eg : SubCookieUtil.setAll("info", { name : "zhang", age : 23});
    **/
    setAll : function (name, subCookies, expires, domain, path, secure) {
      var cookieText = "", subName, cookieParts = [];
      cookieText += encodeURIComponent(name) + "=";
      for(subName in subCookies) {
        cookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subCookies[subName]));
      }
      if (cookieParts.length > 0) {
        cookieText += cookieParts.join("&");
        if (expires instanceof Date) {
          cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
          cookieText += "; path=" + path;
        }
        if (domain) {
          cookieText += "; domain=" + domain;
        }
        if (secure) {
          cookieText += "; secure";
        }
      } else {
        cookieText += "; expires=" + Date(0).toGMTString();
      }
      document.cookie = cookieText;
    },
    /** 设置一条子cookie
    *  param name : 表示cookie的名称,必填
    *  param subName : 表示子cookie的名称,必填
    *  param value : 表示子cookie的值,必填
    *  param expires : 表示cookie的过期时间,可以不填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路径,可以不填
    *  param secure : 表示cookie的安全标志,可以不填
    *  eg : SubCookieUtil.set("info", "sex", "boy");
    **/
    set : function (name, subName, value, expires, domain, path, secure) {
      var cookies = this.getAll(name) || {};
      cookies[subName] = value;
      this.setAll(name, cookies, expires, domain, path, secure);
    },
    /** 读取一条完整cookie
    *  param name : 表示cookie的名称,必填
    *  return : 一个cookie对象
    *  eg : SubCookieUtil.getAll("info");
    **/
    getAll : function (name) {
      var cookieName = encodeURIComponent(name) + "=",
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = "", i, len, subCookies, parts, result = {};
      if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf (";", cookieStart);
        if (cookieEnd == -1) {
          cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        if (cookieValue.length > 0) {
          subCookies = cookieValue.split("&");
          for (i = 0, len = subCookies.length; i < len; i++) {
            parts = subCookies[i].split("=");
            result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
          }
          return result;
        }
      }
      return null;
    },
    /** 获取一条子cookie的值
    *  param name : 表示cookie的名称,必填
    *  param subName : 表示子cookie的名称
    *  return : 一个子cookie的值
    *  eg : SubCookieUtil.get("info", "name");
    **/
    get : function (name, subName) {
      var cookies = this.getAll(name);
      if (cookies) {
        return cookies[subName];
      } else {
        return null;
      }
    }, 
    /** 删除一条完整cookie
    *  param name : 表示cookie的名称,必填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路径,可以不填
    *  param secure : 表示cookie的安全标志,可以不填
    *  eg : SubCookieUtil.unsetAll("info");
    **/
    unsetAll : function (name, domain, path, secure) {
      this.setAll(name, "", Date(0).toGMTString(), domain, path, secure);
    },
    /** 删除一条子cookie
    *  param name : 表示cookie的名称,必填
    *  param subName : 表示子cookie的名称,必填
    *  param domain : 表示cookie的域名,可以不填
    *  param path : 表示cookie的路径,可以不填
    *  param secure : 表示cookie的安全标志,可以不填
    *  eg : SubCookieUtil.unset("info", "name");
    **/
    unset : function (name, subName, domain, path, secure) {
      var cookies = this.getAll(name);
      if (cookies) {
        delete cookies[subName];
        this.setAll(name, cookies, null, domain, path, secure);
      }
    }  
  };
  // 测试:
  var zhang = {
    name : "zhang",
    age : 23,
    height : "178cm",
    weight : "66kg"
  }
  // 设置一条完整的cookie
  SubCookieUtil.setAll("zhang", zhang);
  // 获取一条完整的cookie
  var zhang = SubCookieUtil.getAll("zhang");
  alert(zhang.weight);  // 66kg
  // 再为张添加一个子cookie
  SubCookieUtil.set("zhang", "sport", "basketball");
  // 获取子cookie
  alert(SubCookieUtil.get("zhang", "sport")); // basketball
  // 删除一条子cookie
  SubCookieUtil.unset("zhang", "age");
  alert(SubCookieUtil.get("zhang", "age"));  // undefined
  // 删除一条完整的cookie
  SubCookieUtil.unsetAll("zhang");
  alert(SubCookieUtil.getAll("zhang"));  // 报错,因为已经被删除

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
JavaScript实现简单的拖动效果
Jul 02 #Javascript
jQuery插件简单学习实例教程
Jul 01 #Javascript
jquery插件autocomplete用法示例
Jul 01 #Javascript
AngularJS 避繁就简的路由
Jul 01 #Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 #Javascript
AngularJS实现分页显示数据库信息
Jul 01 #Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
You might like
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
json简单介绍
2008/06/10 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
javascript实现计算器功能
2020/03/30 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
《悯农》教学反思
2014/04/28 职场文书
学生评语集锦
2015/01/04 职场文书
爱情保证书
2015/01/17 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2015年财务部工作总结
2015/04/10 职场文书
员工辞退通知书
2015/04/17 职场文书