持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
cookie、localStorage、sessionStorage
三大浏览器缓存大家都不陌生，下面以表格的形式整理出来，进行对比记忆效果更佳。
其中常用的就是本地存储localStorage和会话存储sessionStorage，它们都存储在客户端。
它的出现解决了cookie的一些问题，比如cookie对于大小的限制、浪费带宽等等。
一、cookie 、localStorage 、sessionStorage对比
| localStorage | sessionStorage | cookies | |
|---|---|---|---|
| 存储大小 | 一般为5M | 一般为5M | 4k |
| 生命周期 | 永久有效，除非手动删除 | 临时存储在session中，关闭浏览器或浏览器标签页后失效（注：刷新不会失效） | 1.未设置过期时间：数据保存在内存中，关闭浏览器后失效；2.手动设置过期时间：保存在硬盘中,到期后失效 |
| 作用范围 | 同源范围共享数据（相同协议、主机名、端口） | 不可以跨标签页获取；不同浏览器的相同页面也无法获取（同源+同窗口） | 同源范围共享数据 |
| 保存位置 | 客户端，不与服务器通信 | 客户端，不与服务器通信 | 需要发送到服务端 |
| 其它 | 浏览器的隐私模式下，localStorage不能读取到现有数据 |
二、使用方法
localStorage与sessionStorage调用的方法相同：
存储：localStorage.setItem("key",val)
获取：localStorage.getItem("key")
移除：localStorage.removeItem("key")
清空：localStorage.clear();
需要注意的是，localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用JSON.stringify和JSON.parse来处理数据：
localStorage.setItem(key,JSON.stringify(...))
const data = JSON.parse(localStorage.getItem(key))
cookie
vue中的使用方法：
npm install js-cookie // 下载依赖
import Cookies from 'js-cookie'
// expires设置过期时间(可省略)，path表示为当前设置的路径创建过期时间
Cookies.set('key', val, { expires: 365, path: ''})
Cookies.get('key') //获取某项
Cookies.get() //获取所有
Cookies.remove('key') //移除
三、什么是同源
-
向服务器发送请求时，如果协议、域名(或IP)、端口号都相同，则称为同源
-
其中有一个不同都是不同源（即跨域），比如下面这些都是不同源的情况：
www.mycode.com www.mycode.com（协议名不同） my.mycode.com（主机名不同） www.mycode.com:8081 （端口号不同）
