数据存储机制
localStorage
什么是localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的特点
优点：
- localStorage拓展了cookie的4K限制；
- localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；
缺点：
- 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；
- 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；
- localStorage在浏览器的隐私模式下面是不可读取的；
- localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；
- localStorage不能被爬虫抓取到。
sessionStorage
什么是sessionStorage
sessionStorage是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在JavaScript语言中可通过 window.sessionStorage或 sessionStorage调用此对象。
sessionStorage的特点
-
同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
-
单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
-
只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
-
存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
-
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
cookie
什么是cookie
cookie，有时也用其复数形式 cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。cookie就是以Key，Value的形式存储在浏览器端的数据。
cookie的特点
存储特点：
- 存储大小受限，跟浏览器版本有关
- 存储条数受限，跟浏览器版本有关
- 字符编码为Unicode，不支持直接存储中文
- 存储内容可以被轻松查看，不建议存储敏感信息
- 可靠性差，可能随时都会因为各种原因被删除
- 存储属性除了Name、Value、过期时间，还有Domian、Path，当前域可以操作当前域子域、父域名的Cookie，当前Path，可以操作当前Path以及当前Path子、父Path下的Cookie。
传输特点：
- 每次Request客户端符合domian以及path要求的Cookie都会通过Request Headers传输到服务器端
- 传输的Cookie大小会受到浏览器以及Web服务器的限制
安全特点：
- Cookie中的信息很容易被查看，建议加密后存储
- Cookie容易被XSS攻击利用，可以设置HttpOnly=true，不允许客户端访问（99.9%的浏览器有效）
功能特点：
- 会话状态管理（如用户登录状态、购物车、游戏分数和其它需要记录的信息）
- 个性化设置（如用户自定义设置、主题等）
- 浏览器行为跟踪（如跟踪分析用户行为）
三者之间的区别
共同点：都是保存在浏览器端、且同源的
区别：
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 。
- 存储大小限制不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的