Cookie、LocalStorage、SessionStorage的区别

##概念 ###Cookie Cookie是保存在客户端的一块数据，常用于记录用户登录的一些状态信息，比如记住密码。 ###LocalStorage LocalStorage是HTML5新增的Web Storage API，IE8及以上浏览器都支持 ###SessionStorage 它为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。 ###三者的区别 |Cookie|LocalStorage|SessionStorage :------|:------------:|:------------:|:------------: 生命周期|设置cookie时会设置过期时间|永久保存（除非手动清除）|当前会话有效（关闭页面或浏览器清除） 存储大小|4k左右（不同浏览器会有细微差异）|一般5M|一般5M 是否与服务器通信|每次请求都会附加在HTTP请求头部|存储在本地，不与服务器通信|存储在本地，不与服务器通信 易用性|原生接口不太友好，需要封装|可以直接使用|可以直接使用

• Cookie大小会有限制，大约4k左右，不同浏览器会有细微差异，另外对于数量也有一定的限制，最为重要的是每次HTTP请求都会附带这些Cookie信息，会给服务器增加很重负担，所以理论上，Cookie能不用就不用，能精简就精简。用户是否登录，是否记住用户名这些场景可以使用Cookie实现。

• LocalStorage作为HTML5新增的Web Storage API，能接替以前Cookie的一些工作，比如购物车信息。LocalStorage存储量很大，每个浏览器的容量上限不同，并且只要没有手动清除会一直保存，而且比起Cookie，它的原生接口可直接使用（使用Cookie时，我们一般会选择引入一些第三方库或者自己封装一下原生的接口）。最重要的是LocalStorage存储在本地，不参与服务器通信，所以不会给服务器造成任何压力，在性能方面也会有一定的提升

• SessionStorage，和LocalStorage的区别就是生命周期不一样，只在当前会话有效。像一些开屏图和弹窗就需要用SessionStorage来实现 ###总结 三者的区别以上做了一些总结，有遗漏的话还请补充。需要注意的是不是什么数据都适合放在Cookie、LocalStorage、SessionStorage中，一些敏感信息千万不要存储在本地，以防遭受XSS攻击。

转载于:https://my.oschina.net/u/3643736/blog/1518023