先抛出问题：当vuex和组件间传值在一定情况下用不了，嘿嘿...这时候监听浏览器本地值 并且实时获取 就变得及其友好，堪比vue的全局事件总线和消息订阅于发布，而且全局可用哦，随意传值，并且只要不是太大（这里的太大指的是浏览器本地存储约sessionStorage5M、localStorage约20M）都可以实现随时取用，而且也可以进行一定的加密不用太担心安全问题。
三种方法分别是：
localStorage和sessionStorage
存储数据：
sessionStorage.setItem(key, value)获取数据：
sessionStorage.getItem(key)删除数据：
sessionStorage.removeItem(key)清空数据：(所有都清除掉)
sessionStorage.clear()对比项目 | cookie | localstorage | sessionStorage |
数据存储时间 | 可设置失效时间 | 永久 | 仅当前会话 |
容量 | <=4kb | <=5mb | <=5mb |
相同点
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储不同点
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
window.localStorage
1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用2. cookie
Cookie的使用场景及须知
- 用于浏览器和server的通讯
- 可设置失效时间，默认是浏览器关闭后失效
- 存放数据大小为4K左右
- 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会带来性能的问题
- .需要程序员自己封装，原生的Cookie接口不友好
- cookie的主要属性表格
key | value |
Name | cookie的名称 |
Value | cookie的值,最大容量4Kb |
Domain | cookie存储的域名 |
Path | cookie存储的路径 |
Size | cookie的大小 |
Expires | 过期时间,值可以是UTC格式,可以使用 Date.prototype.toUTCString() 进行转换 |
Max-Age | 优先级高于Expires,设置cookie存活的秒数 |
HttpOnly | 安全性,设置这个属性后,cookie就不会被js获取到,只有在发起请求时会带上 |
Secure | 不需要设置,当协议是https时,自动开启,指定浏览器只有在加密协议 HTTPS 下才能发送cookie\ |
SameSite | 跨站策略,设置为Lax,即仅允许同站或子站访问cookie;None:允许所有跨站cookie,设置为Lax会导致第三方cookie失效 |
Cookie用法
(设置) document.cookie= "a=100; b=200" //一次只能添加一个, 多余的会被截取
(读取) document.cookie //"a=100"
(修改) document.cookie= "a=101“
(读取) document.cookie //"a=101"设置cookie
/**
* 获取cookie
* @param {*} key 名称
*/
export const getCookie = (key) => {
var getCookie = document.cookie.replace(/[ ]/g, "");
var arrCookie = getCookie.split(";")
var tips;
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (key == arr[0]) {
tips = arr[1];
break;
}
}
return tips;
}获取cookie
/**
* 获取cookie
* @param {*} key 名称
*/
export const getCookie = (key) => {
var getCookie = document.cookie.replace(/[ ]/g, "");
var arrCookie = getCookie.split(";")
var tips;
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (key == arr[0]) {
tips = arr[1];
break;
}
}
return tips;
}
删除cookie
可以直接调用setCookie,把cookie的失效时间设置为-1即可
setCookie(key,'',-1)3.localStorage和sessionStorage实时监听
1、使用场景
（1）在vue项目中，为了在浏览器刷新时，页面数据不丢失，我们会选择将数据浏览器缓存sessionStorage中。
（2）为了传递参数
之所以写这篇文章，也是在上次处理vue中使用keep- alive缓存机制，切换标签含有iframe标签的界面会被重新刷新的问题
过程中，由于切换标签，含iframe的组件不会在触发路由钩子函数和生命周期函数，导致界面数据无法做更新操作，同时还要解决浏览器刷新时，界面数据不丢失的问题，所以才考虑到去监听sessionStorage的值，以此来更新数据。
2、具体实现思路
（1）在vue项目main.js文件中，在vue原型上定义resetSetItem,代码如下：
Vue.prototype.resetSetItem = function (key, newVal) {
if (key === 'printReportShowQuery') {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function (k, val) {
sessionStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent)
}
}
return storage.setItem(key, newVal);
}
}2）通过resetSetItem方法存值，代码如下：
self.resetSetItem('printReportShowQuery', JSON.stringify(query));（3）getItem取值和window.addEventListener监听，代码如下：
created() {
let routQuery = {};
let self = this;
window.addEventListener('setItem', ()=> {
let printReportShowQuery = JSON.parse(sessionStorage.getItem('printReportShowQuery'));
routQuery.url = printReportShowQuery.url;
routQuery.params = JSON.parse(printReportShowQuery.params);
self.init(routQuery);
});
},
