浏览器有三种本地存储方式：
1、localstorage
2、sessionStorage
3、cookie
浏览器 F12 打开调试模式，可以看到：
点击对应域名，可以看到当前域名下存储的数据，是以key，value形式存储的。
三种方式的共同点：
- 都是保存在浏览器端
- 仅同源可用的本地存储方式
localStorage
localStorage：用于持久化的本地存储，即使浏览器重启，甚至操作系统重启也不会丢失，并且存储的数据在同源（协议、域名、端口号一致）下的标签页和window窗口之间共享。
特点
- 每个域名给
localStorage分配的存储空间是5M - 只要在相同的协议，域名，端口下就能读取或修改同一份
localStorage数据 - 生命周期永久，除非用户手动清除浏览器中的
localStorage信息，否则永远存储 - 仅在浏览器中保存，不参与服务器通信
API：
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
sessionStorage
sessionStorage：存储一个会话的数据，页面刷新仍然有效，选项卡关闭时数据丢失。
特点
- 仅在当前会话下有效，关闭页面或者浏览器后被清除
- 每个域名给
sessionStorage分配的存储空间是5M - 仅在浏览器中保存，不参与服务器通信
- 可以接受原生接口，亦可以再次封装来对
Object和Array有更好的支持 sessionStorage除了相同的协议，域名，端口外，还要求在同一窗口下sessionStorage是在同源的同窗口（或tab）中，始终存在的数据- 只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。
- 关闭窗口后，
sessionStorage即被销毁。 - 同时”独立”打开的不同窗口，即使是同一页面，
sessionStorage对象也是不同的 - 在相同标签页打开的多个iframe之间数据可以共享(同源的情况下)
API
sessionStorage.setItem("key","value");//以“key”为名称存储一个值“value”
sessionStorage.getItem("key");//获取名称为“key”的值
sessionStorage.removeItem("key");//删除名称为“key”的信息。
sessionStorage.clear();//清空sessionStorage中所有信息
localStorage与sessionStorage区别
我经常用到的存储方式为localStorage与sessionStorage，因此需要清楚了解它们之间的区别：
localStorage与sessionStorage的API调用方法相同sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存- 不同浏览器无法共享
localStorage或sessionStorage中的信息 - 相同浏览器的不同页面可以共享相同的
localStorage（前提是页面属于相同域名和端口） - 相同浏览器的不同页面无法共享
sessionStorage的信息
页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间可以共享sessionStorage。
也就是说：在当前页面打开的链接和页面，可以访问sessionStorage的数据，在当前页面关联的src链接也可以获取到sessionStorage数据。
存储事件
每当Storage对象发生变化时，都会触发storage事件（增删改查）。
这个事件的时间对象有4个属性：
domain：存储变化对应的域
key：被设置或被删除的键
newValue：键被设置的新值，若被删除则为null
oldValue：键变化之前的值
注意：Storage类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串，并且这种转换不能在获取数据时撤销。
也就是说：在获取storage数据时，拿到的一定是字符串，需要自己手动转换数据类型。
Cookie
特点
- cookies是始于特定域名绑定的，设置之后，会和请求一起发送到服务器端。（ 这个限制能够保证cookie中存储的信息只对被认可的接收者开放，不被其它域访问。）
- cookie 是网站为了标示用户身份而储存在用户本地终端上的数据。（通常都是经过加密的）
- cookie 数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递；
- cookie 与服务器端通信，每次都会携带在HTTP头中，因此， cookie 存储数据过多会带来性能问题。
生命周期
在cookie设置的过期时间之前一直有效，即使窗口或者浏览器关闭；
限制
不超过300个cookie；
每个cookie不超过4096字节（4kb)；
每个域不超过81920字节；
有存储个数限制（各浏览器不同），一般每个域不超过20个；
获取 cookie
document.cookie
以上代码会返回包含页面中所有有效cookie的字符串，以分号分隔。
所有名称和值都是URL编码，所以必须使用decodeURIComponent()解码。
设置 cookie
name=value; expires=expiration_time; path=domain_path; domain=domain_namel secure
//在所有这些参数中，只有cookie的名称和值是必须的
document.cookie = `${encodeURIComponent('name')}=${encodeURIComponent('nanjiu')};domain=bettersong.github.io;`
删除cookie
cookie 的删除没有直接方法，可以通过设置其过期时间，从而达到删除效果。
示例：
document.cookie = 'uid=dkfywqkrhkwehf23;expires=' + new Date(0) + ';path=/;secure;
应用场景：
用vue做的后台管理平台，允许打开多个页面，不同页面可登陆不同的用户，用户之间互不干扰。
如果使用localStorage，因为相同域名和端口，会导致不同页面数据共享，从而引发混乱。如果采用sessionStorage，不同页面即可保证互不干扰，且vue为SPA，无需打开新的页面，因此不会相互干扰。
