cookie & session &localStorage 分别是什么？
- cookie
- cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍需记录的信息。在控制台用document.cookie]查看你当前正在浏览的网站的cookie.
- cookie可以使用js在浏览器直接设置（用于记录不敏感信息，如用户名），也可以在服务端通过使用HTTP协议规定的set-cookie来让浏览器种下cookie，这是最常见的做法。
- 每次网络请求Request headers 中都会带上cookie。所以如果cookie太多太大对传输效率会有影响
- 一般浏览器最大存储cookie量为4k，所以大量数据不要存到cookie
- 设置coolie时的参数：
- path ：表示cookie影响到的路径，匹配该路径才发这个cookie。expires 和maxAge：告诉浏览器什么时候cookie过期，maxAge 是cookie多久后过期的相对时间。不设置这两个选项时会产生session cookie ，session cookie 是transient的，用户关闭浏览器时会被清除。一般用来保存session的session_id
- secure: 当secure值为true时，cookie在HTTP中无效，在HTTPS中有效
- HTTPOnly： 浏览器不允许脚本操作document.cookie去更改cookie。一般情况下都设置为true，这样可以避免被xss攻击拿到cookie
- session
当一个用户打开淘宝登录后，刷新浏览器仍然显示登录状态。服务器如何分辨这次发起请求的用户是刚才登陆过的用户呢？这就使用了session保存状态。用户在输入用户名密码交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个session可保存在服务器内存中，也可以保存在数据库中 - 创建session后，会把关联的session_id通过setCookie添加到http响应头中
- 浏览器在加载页面时发现响应头部有set-cookie字段，就把这个cookie种到浏览器指定域名下
- 当下次刷新页面时，发送的请求会带上这条cookie，服务端在接收到后根据这个session_id来识别用户
- cookie是存储在浏览器里的一小段数据，而session是一种让服务器能识别某个用户的机制，session在实现过程中需要用到cookie。二者不同
- localStorage
- localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远不会失效过期，除非用js 手动删除
- 不参与网络传输。
- 一般用于性能优化，可以保存图片、js 、css、HTML模板、大量数据
使用 localStorage封装一个 Storage 对象，达到如下效果：
Storage.set('name', '饥人谷')
Storage.set('age', 2, 30) ; //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)
Storage.get('name') // ‘饥人谷’
Storage.get('age') // 如果不超过30秒，返回数字类型的2；如果超过30秒，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers') //如果不超过60秒，返回数组； 如果超过60秒，返回undefined
封装后：
var Storage = (function(){
return {
set: function(key, value, expireSeconds){
localStorage[key] = JSON.stringify({
value: value,
expired: expireSeconds===undifind? undefined:Data.now() + 1000*expireSeconds
}
)
},
get: function(key){
if(localDtorage[key]===undefined){
return
}
var o = JSON.parse(localStorage[key])
if(o.expired === undefined || Data.now() < o.expired){
return o.value
}else{
delete localStorage[key]
}
}
}
})
