细说Cookie，LocalStorage，SessionStorage

摘要：内存由浏览器维护，浏览器关闭后消失硬盘存在硬盘里，有过期时间，除非手动清理或到过期时间，否则不会消失。是一个浏览器状态管理文件，由于协议是不保存状态的，需要在请求中携带发送到服务器，服务器根据判断用户。

面试题目中经常被问到Cookie和LocalStorage的区别，可见其在项目开发中的重要性，这篇文章旨在详细阐述这部分内容。

概念

1.Cookie
Cookie分为内存Cookie和硬盘Cookie。内存 Cookie由浏览器维护，浏览器关闭后消失；硬盘Cookie存在硬盘里，有过期时间，除非手动清理或到过期时间，否则不会消失。
Cookie是一个浏览器状态管理文件，由于http协议是不保存状态的，需要在http请求中携带Cookie发送到服务器，服务器根据cookie判断用户。

Cookie原理

Cookie只能绑定单一域名，不可以跨域使用。
Cookie属性：
name：Cookie名称，设置相同名称的值会被覆盖掉;
value：Cookie值，考虑服务器兼容性，必须URL编码;
domain：Cookie绑定域名，没设置的话自动绑定执行语句当前域，统一域名下的二级域名不可交换使用Cookie;
path：匹配路由;
expires/Max-Age：有效期；expires是具体日期，Max-age是以秒为单位，设置为0时，关闭浏览器cookie清除;
secure：设置该属性后，仅通过安全通道（https）传输时，http请求才会包含cookie，但secure仅保护cookie的机密性，不能保护完整性，也不能对客户端Cookie进行加密;
httpOnly： 设为true时，不能脚本获取Cookie，能有效避免跨域本 (XSS) 攻击

Cookie操作：
获取Cookie：document.cookie
修改Cookie：document.cookie = “cookie_name=cookie_value”

Cookie安全：
XSS攻击：XSS(Cross Site Scripting)是跨站点脚本攻击的缩写. 其就是利用站点开放的文本编辑并发布的功能, 从而造成攻击.其实说的简单一点, 就是输入javascript脚本, 窃取并投递cookie信息到自己的站点.
比如攻击者以一个普通用户登录进来，然后在输入框中提交以下数据：

text 

攻击者提交a标签后，该数据保存在服务器端，当管理员登陆后点击到这个a标签后会获取当前cookie到上面a标签设定的网址，叫做XSS攻击，也叫Cookie劫持。

如何防御：
1.添加HttpOnly 属性；
2.在cookie中添加校验信息，比如IP，UA等判断是否真正用户；
3.cookie中的session id定时更换。

cookie接口封装：

var cookieUtil = {
    // 设置cookie
    setItem: function(name, value, days) {
        var date=new Date();
        date.setDate(date.getDate()+days);
        document.cookie=name+"="+value+";expires="+date;
    },

    // 获取cookie
    getItem: function(name) {
         var arr=document.cookie.replace(/s/g, "").split(";");
         for(var i=0;i
2.localStorage，sessionStorage
HTML5新增的客户端存储API，都遵循浏览器的同源策略。
localStorage:没有时间限制的数据存储
sessionStorage:针对一个session的数据存储
操作：
setItem(key, value) 以键值对的形式存储，
localStorage.setItem(‘key’, value)

getItem(key) 通过key获取value值
var value = sessionStorage.getItem(“key”)

removeItem(key)通过key删除对应value
localStorage.removeItem(“key”)

clear()  清空存储内容
localStorage.clear()

key/length等用法：
var storage = window.localStorage;
storage.key1 = ‘Hello’;
storage[key2] = ‘world’;
console.log(storage.key1+’’+storage.key2) // Hello world

var storage = window.localStorage;
console.log(storage.length) // 返回已存储简直对的个数

三者的异同

数据生命周期
Cookie:一般由服务器生成，可设置失效时间。如果在浏览器端生cookie，默认关闭浏览器后失效
localStorage:除非被清除，否则永久保存
sessionStorage:仅在当前会话下有效，关闭页面或浏览器被清除
存放数据大小
Cookie:4K左右
localStorage/sessionStorage:5MB左右
与服务器端通信
Cookie:每次都会携带在HTTP头中，如果cookie保存过多，会带来性能问题
localStorage/sessionStorage:仅在客户端内存中保存，不参与和服务器端通信
易用性
Cookie:需要自己封装，源生Cookie接口不友好
localStorage/sessionStorage:源生接口可接受，使用方便
参考资料
维基百科-Cookie
把cookie聊清楚
Secure Cookie
Http cookies
Window.localStorage
详说Cookie、localStorage、sessionStorage