cookies、sessionStorage和localStorage的区别
cookie
Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息
当我们第一次请求网页内容的时候是没有任何cookie的，服务器在收到请求以后会在HTTP响应头部里添加Set-cookie,并且在Set-cookie里进行标识，
在下一次请求的时候浏览器就会在HTTP请求里添加头部Cookie,并且用上set-cookie里的标识，这样服务器就可以给不同用户匹配不同的内容了。
现在一般发请求会禁用cookie,因为浪费性能
重点：自从服务器给了Set-cookie以后，以后每一次HTTP请求都要把Cookie数据传送到服务器，这样很浪费带宽和性能资源，所以cookie设计的很小，限制为4kb左右,
多用来存储用户登录信息，例如登录网站的记录密码，通常是通过在cookie中存入用户数据实现的。
可设置失效时间，默认是关闭浏览器后失效
cookie存储：
document.cookie = 'username=dary' // 存一条username为dary的cookie
但是如果当我们要存一条中文的cookie，比如：username=张三，在部分低版本浏览器就会遇到一些位置错误，这时就可以使用 encodeURIComponent 编码对中文进行编码：
document.cookie = `username=encodeURIComponent('张三')`
以后取得时候我们可以通过decodeURIComponent 方法进行解码
cookie的时效
上图中有Expires/max-Age选项，这一项指的就是cookie的有效期，我们可以看到是session，代表会话期，也就是默认的会话结束cookie失效，这时我们重启浏览器就看不到这条cookie了。
除了默认的会话过期我们还可以手动设置cookie的过期时间，比如：7天后过期
var date = new Date()
date.setDate(date.getDate() + 7)
document.cookie = `username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`
cookie存储路径
我们来测试一下路径，随便进入项目中某一个目录或者新建一个目录，然后把一下代码放进去执行
document.cookie = 'username=dary'
我们可以看到，path不再是之前的 / 了，而是当前目录，这时我们再回到首页，你会发现，这条cookie不见了，因为外层时访问不了内层目录存的cookie的。
所以我们一般存cookie都会这么写：
document.cookie = 'username=dary;path=/'
这样项目中任意位置都可以访问这一条cookie
修改cookie
在 JavaScript 中，修改 cookie 类似于创建 cookie
document.cookie = 'username=dary2;path=/'
旧的 cookie 将被覆盖。
删除coookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
删除时不必指定 cookie 的值。
localstorage 和 sessionstorage
HTML5有了web存储，其中两个重要的对象就是localStorage和sessionStorage，localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据
localstorage
localstorage是存储在浏览器中，除非被手动清除，否则永久保存。
语法：
localStorage.setItem() localStorage.getItem() localStorage.removeItem()
局限性：
1.目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
2.localStorage在浏览器的隐私模式下面是不可读取的。
3.localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
注意：
1.localStorage 的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的 localStorage。
2.如果存储进去的是 int 类型，打印出来却是 string 类型，这个与 localStorage 本身的特点有关，localStorage 只支持 string 类型的存储。
sessionstorage
sessionstorage与localStorage类似；唯一的区别是仅在当前会话下有效，关闭窗口或浏览器后被清除
区别
应用场景
sessionstorage 缓存静态数据，在内存中缓存。用户缓存不同域名下的静态资源，例如用户头像，存到sessionstorage里，因为同域名的浏览器会自动缓存。
localstorage 可以保存用户界面设置
