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始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。
