Web Storage API (sessionStorage,localStorage) 提供机制， 使浏览器能以一种比使用 Cookie 更直观的方式存储键/值对。
前言
我简单理解就是数据的本地存储，个人运用也是登录状态和个人信息等存储, 保证页面刷新与路由变化都不会丢失与初始化。 但三者具体的区别是什么？会在本文赘述。当然也是方便自己以后查看，毕竟健忘…
基本概念
Cookie
Cookie 是服务器保存在浏览器的一小段文本信息，一般大小不能超过 4KB。通常保存登录状态 （会话状态管理）、个性化设置、浏览器行为跟踪等。
sessionStorage
“session"会话，可以为前端的浏览器会话机制. 比使用 Cookie 更直观的方式存储键/值对呈现。可以存储数据信息，刷新、重新加载与恢复页面数据仍然存在，但当页面关闭或浏览器关闭，数据将会被清空。
localStorage
与 sessionStorage 基本相同，同样的功能，较大的区别就是浏览器关闭，重新打开后数据仍然存在。与 Cookie 一样支持同源窗口数据共享。
异同
| 特性 | Cookie | Web Storage |
|---|---|---|
| 数据周期 | 一般由服务器生成，时效期 | sessionStorage: 当前会话有效，关闭页面/浏览器清除;localStorage:浏览器永久保存，可清除 |
| 数据大小 | 4K左右 | 一般5M,甚至更大 |
| 使用 | 前端开发者需要自己封装setCookie，getCookie | 浏览器提供API，拥有setItem,getItem,removeItem,clear等方法 |
| 访问 | 服务器 + 客户端 | 浏览器 （服务器不能直接访问） |
使用
Cookie
当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。MORE
Set-Cookie: <cookie名>=<cookie值>
Web Storage
like this:
localStorage.setItem('name', value);
localStorage.getItem('name');
localStorage.clear()
安全
详细文档可参考一下MDN文档。但总的来说都不安全， Cookie注意使用HTTPS，还有就是不管什么存储信息都不要存储敏感信息数据。