Cookie (HTTP Cookie)
作用
HTTP本身是无状态的,客户端通过Cookie来存储会话信息
限制
cookie在性质上是绑定在特定域名下的
意思是说当设定了一个cookie之后,再给创建这个cookie的域名发送请求的时候,都会包含这个cookie,这个限制确保了存储在cookie中的信息只能让批准的接受者访问,而无法被其他域访问
每个域名的cookie总数有限制 (name=value&age=18) 两个
IE7之后 最多50个
Firefox 最多50个
Opera 最多30个
Safari和 chrome 对每个域名的cookie数量没有限制
cookie的尺寸有限制 大约4096B(加减1)的长度限制 建议cookie的长度限制在4095B以内 尺寸限制影响到一个域下的所有cookie,而非每个cookie单独限制
组成
名称
一个唯一确定cookie的名称 不区分大小写 mycookie 和 myCookie是一个cookie 实践中最好区分大小写 名称要被URL编码
值
存储cookie的字符串值 要被URL编码
域
cookie对于哪个域名是有效的 所有向该域发送的请求中都会包含这个cookie的信息
值
可以包含子域(subdomain 如www.wrox.com)
不包含子域 (如 .wrox.com 对于所有的子域都有限 可以做跨域信息存储)
默认 来自设置cookie的那个域
路径
对于指定域中的路径应该向服务器发送cookie 例:可以指定cookie只可以从http://www.wrox.com/book/中访问,那么http://www.wrox.com的页面就不会发送cookie信息
即便请求来自同一个域
失效时间
表示cookie何时应该被删除的时间戳(也就是何时应该停止向服务器发送这个cookie)
默认情况下 浏览器会话结束时即将所有的cookie删除
时间格式 GMT (toGMTString())
如果设置的失效时间是当前时间以前 则cookie会被立刻删除
安全标识
在字符串中指定 secure 即可
指定后,只有使用SSL连接的时候才发送到服务器。例如cookie信息只能发送https://www.wrox.com 而 http://www.wrox.com的请求不能发送cookie
注意:
cookie的名称 和 值 要经过 URL编码
域 路径 实效时间 secure标志都是服务器给浏览器的指示,以指定何时发送cookie 这些参数并不会发送到服务器的cookie信息的一部分,只有名值对才发送
例子
注:这里说的set-Cookie是客户端设置的内容
set-Cookie: name=value;domain=.wrox.com; path=/; secure
这里创建了一个对于所有的wrox.com的子域和域名下(由path参数指定的)所有页面都有效的cookie 因为创建了 secure标志 这个cookie只能通过SSL连接才能传输
JS中的cookie
document.cookie
返回当前页面可用的所有cookie(根据cookie的域 路径 失效时间 和安全设置)
document.cookie = "key=value" 不会覆盖之前的cookie 而是添加到cookie的字符串中 如果key相同 则覆盖
设置
name=value; expires=expiration_time; path=domian_path; secure
只有name和value是必要参数 其余为可选
例子
document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("value") +"; domain=".wrox.com; path=/; expires=" + new Date(); //new Date(0)设置为过期
IE 用户数据
<div style="behavior:url(#default#userData)" id="dataStore"></div>
var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("name", "lxk");
dataStore.setAttribute("age", 22);
dataStore.save("info")
div元素上存了两部分信息 在setAttribute()存储之后 调用了save方法 指定了数据空间的名称为info 下一次页面载入的时候 使用load()方法指定同样的数据空间来获取数据 值不存在或者载入不存在的 返回为null
dataStore.load("info");
dataStore.getAttribute("name") --> lxk;
dataStore.getAttribute("age") --> 22
可以调用removeAttribute("name")来删除 之后再调用save()方法保存即可
延伸:
不同子域之间通信问题
可以通过设置 domain为.wrox.com 来让所有的子域可以拿到这个cookie
HTTP 是一个网络协议 专门用来传输WEB的内容的
SSL
Secure Sockets Layer 安全套接层 网景提出
为啥有SSL协议呢
因为HTTP协议是明文的,存在很多缺点(传输内容会被窥探和修改)
TLS
Transport Layer Security 传输层安全协议
1999年,SSL 因为应用广泛,已经成为互联网上的事实标准。IETF 就在那年把 SSL 标准化 之后标准化的名字叫TLS 和SSL为同一个东西的不同阶段
HTTPS
HTTP + SSL/TLS
var CookieUtil = { /* * 思路 * 字符串的截取(开始位置, 结束位置) * 开始位置 indexOf() + name.length * 结束位置 indexOf(";", 开始位置) 如果= -1 结束位置等于字符串的长度; **/ get: function(name){ var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; 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; }, set: function(name, value, expires, path, domain, secure){ var 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; }, unset: function(name, path, domain, secure){ this.set(name, "", new Date(0), path, domain, secure); } }; /* * 解析 cookie格式(subCookie)为 name=name1=value1&name2=value2&name3=value * * **/ var SubCookieUtil = { get: function(name, subName){ var subCookie = this.getAll(name); if(subCookie){ return subCookie[subName]; }else{ return null; } }, getAll: function(name){ var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null, cookieEnd, subCookies, i, parts, result = {}; if(cookieStart > -1){ cookieEnd = document.cookie.indexOf(";", cookieStart); if(cookieEnd == -1){ cookieEnd = document.cookie.length; } cookieValue = 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; }, set: function(name, subName, value, expires, path, domain, secure){ var subcookies = this.getAll(name) || {}; subcookies[subName] = value; this.setAll(name, subcookies, expires, path, domain, secure) }, /* * setALl("data", {name:"Nicholas", age: 22}, new Date("January 2 2020")) *. **/ setAll: function(name, subcookies, expires, path, domain, secure){ var cookieText = encodeURIComponent(name) + "=", subCookieParts = new Array(), subName; for(subName in subcookies){ if(subName.length > 0 && subcookies.hasOwnProperty(subName)){ subCookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName])) } } if(subCookieParts.length > 0){ cookieText += subCookieParts.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=" + (new Date(0)).toGMTString(); } document.cookie = cookieText; }, unset: function(name, subName, path, domain, secure){ var subcookies = this.getAll(name); if(subcookies){ delete subcookies[subName]; this.setAll(name, subcookies, null, path, domain, secure) } }, unsetAll: function(name, path, domain, secure){ this.setAll(name, null, new Date(0), path, domain, secure) } }