把数据保存到cook_数据存储之HTTP Cookie

补充说明：

cookie未设置失效时间，浏览器没有删除cookie

sessionStorage 在浏览器中打开新页面不会记录(sessionStorage)，window.open 打开就会记录，为什么？

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 用户数据

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))

}

returncookieValue;

},

set: function(name, value, expires, path, domain, secure){

var cookieText = encodeURIComponent(name) + "=" +encodeURIComponent(value);

if(expires instanceofDate){

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){

returnsubCookie[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])

}

returnresult;

}

}

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 = newArray(),

subName;

for(subName insubcookies){

if(subName.length > 0 &&subcookies.hasOwnProperty(subName)){

subCookieParts.push(encodeURIComponent(subName) + "=" +encodeURIComponent(subcookies[subName]))

}

}

if(subCookieParts.length > 0){

cookieText += subCookieParts.join("&");

if(expires instanceofDate){

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){

deletesubcookies[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)

}

}