数据存储之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 用户数据
<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)
}
}