一、各个的特点
1.cookie：大小4K；
数据在http请求中携带，每一次都会引发一个http请求，浪费带宽。
cookie数据有path(路径)的概念，可以限制cookie只属于某一个路径下。
cookie在设置的失效日期内都会有效。
cookie在所有同源窗口中都是共享的。(sessionstorage不共享即使同一个页面)
2.cookie与session区别：
1.存储方式：cookie存储在浏览器端，session存储在服务器端
2.使用方式：
cookie：如果没有设置过期时间，cookie被保存在内存中，则浏览器关闭cookie就会消失，这种被称为回话cookie；
如果设置了过期时间，则被保存在硬盘中，在浏览器关闭以后也不会消失。
session：当服务器收到请求需要创建session对象的时候，首先会检查客户端对象中，是否有session id。如果有sessionid服务器会根据id返回来对应session对象。如果客户端 没有sessionid，那么服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。一般使用cookie存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则需要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为党浏览器支持cookie时，url不作任何处理；当浏览器不支持cookie时，将会重写URL将sessionid拼接到访问地址后。
3.存储内容：
cookie只能存储字符串类型，以文本形式；session通过类似于Hashtable的数据结构来存储，能支持任何类型的对象（session中可含有多个对象）
4.存储大小：
cookie存储4K；session没有大小限制。
5.安全性：
针对cookie存在的攻击：cookie欺骗；cookie截获；session比cookie更安全。
(1)sessionid存储在cookie中，若要攻破session首先需要攻破cookie。
(2)sessionid需要有人的登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionid
(3)第二次启动session_start后，前一次的sessionid就是失效了，session过期以后，sessionid也会随之失效。
(4)sessionid是加密的。
(5)综上所述，攻击者必须在短时间以内攻破加密的sessionid，有一定的难度。
6.应用场景：
cookie:(1)判断用户是否登录过网站，以便下次登录时能够自动实现自动登录。如果我们删除cookie，就需要重新填写。
(2)保存上次登录的时间信息等。
(3)保存上次查看的页面
(4)浏览计数
Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用
（4）防止用户非法登录
7.cookie缺点见顶部。
session缺点：(1)session保存的东西越多，就越占服务器内存，用户在线人数较多的网站，服务器内存压力会比较大。
(2)依赖cookie(存储cookie id)，如果仅用cookie，URL需要重写，不安全。
(3)创建session变量有很大的随意性，可随时调用，不需要开发者做精髓的处理，所以过渡session变量将会导致代码的不可读性和不好维护。
二、localstorage
存储：localstorage.setItem(key,value)
localstorage.key=value
获取：localstorage.getItem(key)
const localstorage.key直接获取数据
删除：localstorage.removeItem(key)
获取总长度：localstorage.length
清空：localstorage.clear()
1、localstorage的优势：
1.拓展了cookie的4K限制，大约为5M。
2.可以将第一次请求数据存储在本地，比cookie更加节约带宽。
2、localstorage的缺点：
1.不同浏览器大小不统一，IE8以上才支持localstorage
2.目前所有支持浏览器都会把值设定义为string，所以json需要进行数据转换。
3.localstorage在浏览器隐私模式下不可读取。
4.在本质上是对字符串的读取，如果存储的内容过多的话会比较卡顿。
5.localstorage不能被爬虫读取，不用他完全替代URL
三、WebStorage
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。
1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
WebStorage的优点：
（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
（6）WebStorage提供了一些方法，数据操作比cookie方便；
getItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key