Cookie
存储在用户本地终端上的数据,指某些网站为了辨别用户身份进行session跟踪而存储在本地终端上的数据,通常经过加密,一般应用最典型的案例就是判断注册用户是否已经登陆过该网站。
// 获取cookie值
function getCookie(key) {
var arr1 = document.cookie.split('; ');
for (var i = 0; i < arr1.length; i++) {
var arr2 = arr1[i].split('=');
if (arr2[0] == key) { return decodeURI(arr2[1]); }
}
}
// 删除cookie
function removeCookie(key) {
setCookie(key, '', -1);
}
// 存储cookie
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + t);
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
// 注意 设置cookie一次只能存储一条
// cookie可以多次设置 key相同不会重新赋值 而是会新建一条cookie
}
如何工作
当网页要发 http 请求时,浏览器会先检查是否有相应的 cookie,有则自动添加在 request header 中的 cookie 字段中。这些是浏览器自动帮我们做的,而且每一次 http 请求浏览器都会自动帮我们做。这个特点很重要,因为这关系到“什么样的数据适合存储在 cookie 中”。
存储在 cookie 中的数据,每次都会被浏览器自动放在 http 请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销;但如果这些数据是每个请求都需要发给服务端的数据(比如身份认证信息),浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息(最典型的就是身份认证信息)”就特别适合放在 cookie 中,其他类型的数据就不适合了。
Cookie属性
name:为一个 cookie 的名称
value: (必须)一个键值对,用来指定 cookie 的值
document.cookie = 'userName=fengkaicahng';
expires/Max-Age :cookie超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置的话默认值是Session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器) 后,此cookie失效。
var day = new Date();
day.setTime(day.getTime()+(1*24*60*60*1000));
// 设置一天的有效期
// 如果不设置; 默认时间是当前会话窗口关闭即失效
document.cookie = 'userName=fengkaicahng;expires="+day+"';
domain:指定发送 Cookie 的域名
var day = new Date();
day.setTime(day.getTime()+(1*24*60*60*1000));
//只有在该域名下才发送 cookie,
//如果不设置; 默认是设置 cookie 时的域名
//以下配置会在 fengkaichang.com 的所有子域名下生效
document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;
Size:此 cookie 大小
path:指定 Cookie 的路径
var day = new Date();
day.setTime(day.getTime()+(1*24*60*60*1000));
// 只有这个路径和发送到服务器的路径相同才发送cookie 可以直接配置/ 从根目录下匹配 这个匹配并不是绝对的,
// 如果不设置; 默认是请求该cookie时的路径
// 以下配置会在fengkaichang.com 的所有请求路径下生效
// 注意 path生效的前提是domain匹配成功,否则都是扯淡
document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/'
secure:指定Cookie只能在加密协议HTTPS下发送到服务器
var day = new Date();
day.setTime(day.getTime()+(1*24*60*60*1000));
//这个属性的值是一个布尔值
//如果这个通信协议是HTTPS那么协议自动打开
//如果手动设置 一下配置不会在普通HTTP协议下发送
document.cookie = 'userName=fengkaicahng;expires='+day+';domain=fengkaichang.com;path=/;secure=true'
http:cookie的httponly属性。若此属性为true,则只有在http请求头中会带有此cookie的信息,而不能通过document.cookie来访问此cookie。
secure:设置是否只能通过https来传递此条cookie
优点
- 可以设置 cookie 的有效时间;
- 通过加密和安全传输技术SSL,减少cookie被破解的可能性;
- 不需要任何服务器资源 ,Cookie 存储在客户端并在发送后由服务器读取;
- 简单:Cookie 是一种基于文本的轻量结构,包含简单的键值对。
缺点
- Cookie 的大小有4k的限制;
- 安全性问题:如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。即使加密也与事无补,因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到目的了;
- 有些用户禁用了浏览器或客户端设备接收 Cookie 的能力;
- 一个域名下存放的 cookie 的个数是有限制的,不同的浏览器存放的个数不一样,一般为50个。
cookie跨域问题
domain 表示的是 cookie 所在的域,默认为请求的地址,如网址为 www.jb51.net/test/test.aspx,那么 domain 默认为 www.jb51.net。而跨域访问,如域A为 t1.test.com,域B为 t2.test.com,那么在域A生产一个令域A和域B都能访问的 cookie 就要将该 cookie 的 domain 设置为 .test.com;如果要在域A生产一个令域A不能访问而域B能访问的 cookie 就要将该 cookie 的 domain 设置为 t2.test.com。
解决cookie跨域问题之nginx反向代理
反向代理(Reverse Proxy)方式是指以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器;并将从服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。
反向代理服务器对于客户端而言它就像是原始服务器,并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求,接着反向代理将判断向何处(原始服务器)转交请求,并将获得的内容返回给客户端,就像这些内容 原本就是它自己的一样。
利用nginx的方向代理来解决cookie跨域问题,其实是通过“欺骗”浏览器来实现的,通过nginx,我们可以将不同工程的cookie放到nginx域下,通过nginx反向代理就可以取到不同工程写入的cookie。
H5提供了两种在客户端存储数据的新方法:sessionStorage和localStorage,两者都是仅在客户端(浏览器)中保存,不参与和服务器的通信
sessionStorage
用于本地存储一个会话(session)中的数据,针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除。
localStorage
没有时间限制的数据存储,第二天,第二周或者下一年,数据依然可用。
localStorage本身带有方法有:
- 添加键值对:localStorage.setItem(key,value)
- 获取键值:
localStorage.getItem(key) - 删除键值对:localStorage.removeItem(key)
- 清除所有键值对:
localStorage.clear() - 获取localStorage的属性名称(键名称):
localStorage.key(index)。 - 还有一个和普通对象不一样的属性length,获取localStorage中保存的键值对的数量:localStorage.length
三者的共同点
都是保存在浏览器端,且同源的(协议,域名,端口号都相同)
三者的区别
- cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递;cookie数据还有路径的概念,可以限制cookie只属于某个路径下;cookie数据不能超过4k,因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话的标识。
- sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;它们的存储大小可以达到5M或者更大。
- cookie只在设置的时间之前有效,即使浏览器关闭也有效;sessionStorage仅在当前浏览器窗口关闭前有效;localStorage始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据。