浏览器存储介绍（cookie & session & localStorage）

cookie & session &localStorage 分别是什么？

---

• cookie

1. cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍需记录的信息。在控制台用document.cookie]查看你当前正在浏览的网站的cookie.
2. cookie可以使用js在浏览器直接设置（用于记录不敏感信息，如用户名），也可以在服务端通过使用HTTP协议规定的set-cookie来让浏览器种下cookie，这是最常见的做法。
3. 每次网络请求Request headers 中都会带上cookie。所以如果cookie太多太大对传输效率会有影响
4. 一般浏览器最大存储cookie量为4k，所以大量数据不要存到cookie
5. 设置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]
            }
        }
    }
})