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);
      });
    },