客户端存储localStorage和sessionStorage以及Cookie
前言
正常情况下，我们前端写的静态页面，只要刷新，就重置了，无法保留任何信息。为解决这一弊端
我们可以利用js中的客户端数据存储。
简介
在JS中存储在客户端数据有很多方式：Storage有两个对象：localStorage （本地存储）和sessionStorage（临时存储），Cookie，indexedDB（一般用于游戏开发存储体积较大）
总结
Cookie、localStorage、SessionStorage的区别
Cookie需要借助http，而Storage不需要
Cookie存储空间小4kb，Storage 空间大5Mb
Cookie的操作比较麻烦，Storage有相应的api帮助我们快速操作。
Cookie可以设置过期时间，Storage不能，localStorage没有过期时间，SessionStorage浏览器关闭就消失。
Cookie还可以给不同的path和域名设置cookie，storage不能。
localStorage设置后，整个域名共享，SessionStorage只有对应的页面可以使用，其他页面无法使用。
他们可以实现的功能大致相同。
Storage
Storage分为localStorage和sessionStorage，他们有相同的API可以进行添加、修改、删除、清空操作。
- setItem(key, value)
- removeItem(key)
- getItem(key)
- clear()
这两个存储的方法一致，是一样的效果。
这个中间只能存字符串，引用类型存储时会自动调用toString方法，如果想要存储对象或者数组，可以使用JSON.stringify进行转换，转换为字符串
特性
本地存储localStorage
存储数据到本地，只要你不主动删除，并且电脑浏览器不被卸载，这个数据就永远可以被获取到存储大小一般为10m甚至更大，在所有同源窗口中都是共享的，不参与浏览器与服务器的传递；
临时存储sessionStorage
存储数据在本地，只要浏览器关闭，则会话存储就会被清空，存储大小一般为5m甚至更大，不在不同的浏览器窗口中共享，不参与浏览器与服务器的传递；
cookie
相比Storage存储量更小仅为4k，前后端人员都能设置cookie，在所有同源窗口中都是共享的，参与浏览器与服务器的传递，还有第一次请求是没有cookie的，通常是由后端人员设置，服务器在收到请求之后会在响应中添加头部 Set-Cookie，并标识
cookie的缺点：
- 存储小。只有4kb
- 自动被携带http请求中，导致请求时间变长。
- 必须依赖服务器
- cookie比较早，相关api比较老，不好操作。需要人为封装函数。