缓存

1.sessionStorage：本地缓存，关闭窗口清空缓存

加入缓存：sessionStorage.setItem('headerTitle',this.headerTitle); 

获取缓存中的数据：this.headerTitle = sessionStorage.getItem("headerTitle");

清除缓存：sessionStorage.removeItem("headerTitle");

删除所有数据：sessionStorage.clear(); 

得到某个索引的key：sessionStorage.key(index);

 

2.localStorage：本地缓存，只要不清除一直缓存

用法同sessionStorage

 

 sessionStorage和localStorage存放数据大小为一般为5MB,而且它们仅在客户端（即浏览器）中保存，不参与和服务器的通信。

 

3.cookie：Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制。从实现上说，Cookie是存储在客户端上的一小段数据，浏览器（即客户端）通过HTTP协议和服务器端进行Cookie交互。

Cookie没有显示的删除函数，可以设置expire过期时间，自动触发浏览器的删除机制。

使用：

（1）首先加载模块

npm i js-cookie -S

（2）在使用cookie的页面上进行引入

import Cookies from 'js-cookie'

（3）使用方法

• 创建一个在整个网站上有效的Cookie

  Cookies.set('name', 'value');

• 创建一个从现在起7天后过期的cookie，在整个站点上有效：

  Cookies.set('name', 'value', { expires: 7 });

• 创建一个7天后过期的cookie，对当前页面的路径有效：

  Cookies.set('name', 'value', { expires: 7, path: '' });

• 读取cookie：

  Cookies.get('name'); // => 'value'
  Cookies.get('nothing'); // => undefined

• 阅读所有可见的Cookie：

  Cookies.get(); // => { name: 'value' }

• 删除cookie：

  Cookies.remove('name');

• 删除对当前页面路径有效的cookie：

  Cookies.set('name', 'value', { path: '' });
  Cookies.remove('name'); // fail!
  Cookies.remove('name', { path: '' }); // removed!

 

4.keep-alive(组件)：参考https://www.cnblogs.com/smart-girl/p/10496769.html

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 同时，页面也会失去2个钩子函数 created 和mounted

使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。 这也表示被组件包裹的的组件将不会重新渲染，所以需要我们在特定的情况下强制刷新某些组件