JavaScript数据存储 Cookie篇

156 阅读 0 评论 103 点赞

我是靠谱客的博主激动宝贝，这篇文章主要介绍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？

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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的值中存储多条数据，用"&"隔开。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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"));  // 报错，因为已经被删除