前端浏览器本地存储的 三种方法以及实时监听

先抛出问题：当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的使用场景及须知

1. 用于浏览器和server的通讯

2. 可设置失效时间，默认是浏览器关闭后失效

3. 存放数据大小为4K左右

4. 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会带来性能的问题

5. .需要程序员自己封装，原生的Cookie接口不友好

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