JavaScript数据存储 Cookie篇

转载  更新时间:2016年07月02日 10:50:33   作者:光明大神棍   我要评论

这篇文章主要为大家介绍了JavaScript数据存储 Cookie篇,感兴趣的朋友可以参考一下

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时间差插件分享

    javascript时间差插件分享

    这篇文章主要为大家分享了javascript时间差插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 学习JavaScript设计模式(多态)

    学习JavaScript设计模式(多态)

    这篇文章主要带领大家学习JavaScript设计模式,其中重点介绍多态,举例说明多态的思想,对多态进行详细剖析,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript弹出对话框的三种方式

    JavaScript弹出对话框的三种方式

    本文主要介绍了javascript中的三种弹出对话框,分别是alert()方法,confirm()方法,prompt()方法,对javascript弹出对话框相关知识感兴趣的朋友一起学习吧
    2016-03-03
  • javascript 函数参数原来是可以有缺省值的

    javascript 函数参数原来是可以有缺省值的

    前几天看 javaEye 时看到一个童鞋写的 getElementsByClassName 函数。
    2010-07-07
  • bootstrap输入框组使用方法

    bootstrap输入框组使用方法

    这篇文章主要为大家详细介绍了bootstrap输入框组的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js代码解密代码

    js代码解密代码

    在做网页时(其实是网页木马呵呵),最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的JAVASCRIPT代码常常被别人轻易的拷贝,实在让自己的心里有点不是滋味,要知道自己写点东西也挺累的
    2008-06-06
  • 让图片跳跃起来  javascript图片轮播特效

    让图片跳跃起来 javascript图片轮播特效

    让图片跳跃起来 这篇文章主要介绍了javascript图片轮播特效,图片按照间隔时间进行切换,文章具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • react-router实现跳转传值的方法示例

    react-router实现跳转传值的方法示例

    这篇文章主要给大家介绍了关于react-router实现跳转传值的相关资料,文中给出了详细的示例代码,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-05-05
  • 详解springmvc 接收json对象的两种方式

    详解springmvc 接收json对象的两种方式

    本篇文章主要介绍了springmvc 接收json对象的两种方式,具有一定的参考价值,有需要的可以了解一下。
    2016-12-12
  • JavaScript来实现打开链接页面的简单实例

    JavaScript来实现打开链接页面的简单实例

    下面小编就为大家带来一篇JavaScript来实现打开链接页面的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论