二十六. 浏览器本地存储

一. 定义

1. 说到底，这个不是vue的知识，而是学js时学习的知识，但是vue使用的挺多！
2. 在浏览器中存储主要分为以下三种方式：
   （1）localStorage：本地存储
   （2）sessionStorage：session存储
   （3）cookie

二. 使用

1. localStorage（本地存储）

（1）介绍：

• 生命周期永久，除非用户清除浏览器中的localStorage信息，否则永远存在；
• 存放数据大小一般为5MB；
• 仅在浏览器中保存，不参与服务器通信；

（2）API调用：

• localStorage.setItem("key","value"); //以“key”为名称存储一个值“value”
• localStorage.getItem("key"); //获取名称为“key”的值
• localStorage.removeItem("key"); //删除名称为“key”的信息。
• localStorage.clear();​ //清空localStorage中所有信息

2. sessionStorage（session存储）

（1）介绍：

• 仅在当前会话下有效，关闭页面或者浏览器后被清除；
• 存放数据大小一般为5MB；
• 仅在浏览器中保存，不参与服务器通信；
• 可以接受源生接口，亦可以再次封装来对Object和Array有更好的支持；

（2）API调用：

• sessionStorage.setItem("key","value");//以“key”为名称存储一个值“value”
• sessionStorage.getItem("key");//获取名称为“key”的值
• sessionStorage.removeItem("key");//删除名称为“key”的信息。
• sessionStorage.clear();​//清空sessionStorage中所有信息

3. Cookie

• 生命周期为在cookie设置的过期时间之前一直有效，即使窗口或者浏览器关闭；
• 存放数据大小为4K；
• 有存储个数限制（各浏览器不同），一般不超过20个；
• 与服务器端通信，每次都会携带在HTTP头中，cookie存储数据过多会带来性能问题；

三. 问题：

1. localStorage与sessionStorage区别

我经常用到的存储方式为前两种，因此需要清楚了解它们之间的区别。
（1）localStorage与sessionStorage的API调用方法相同；
（2）不同浏览器无法共享localStorage或sessionStorage中的信息；
（3）相同浏览器的不同页面可以共享相同的localStorage（前提是页面属于相同域名和端口）；
（4）相同浏览器的不同页面无法共享sessionStorage的信息；

四. 实战、应用场景

1、需求：用vue做的后台管理平台，允许打开多个页面，不同页面可登陆不同的用户，用户之间互不干扰。
解决：结合上述信息与要求，如果使用localStorage，因为相同域名和端口，会导致不同页面数据共享，从而引发混乱。如果采用sessionStorage，不同页面即可保证互不干扰，且vue为SPA，无需打开新的页面，因此不会相互干扰。实测可行。