localStorage监听

localStorage监听实现原理：通过改写localStorage.setItem方法，增加了一个事件通知机制，使得每当有数据写入本地存储时，都会触发一个自定义事件，便于开发者监听这一变化并作出相应的处理。

步骤一：在Utils内创建一个js文件

function openCustomer(){
  const signSetItem = localStorage.setItem;
  localStorage.setItem= function (key,val){
    let setEvent = new Event('setItemEvent')
    setEvent.key = key;
    setEvent.newValue = val;
    window.dispatchEvent(setEvent);
    signSetItem.apply(this , arguments);
  }
}
export default openCustomer;

                                                                       步骤解析 

const signSetItem = localStorage.setItem;
//保存原始的localStorage.setItem方法到一个常量signSetItem中。
//这是为了在后续重写setItem方法时，仍然能够调用原始方法来真正执行设置本地存储项的操作，确保数据能够被正确存储。

localStorage.setItem= function (key,val){};
//重写localStorage方法
//当调用localStorage.setItem(key, val)时，将会执行这个新定义的函数而不是原来的默认行为。

let setEvent = new Event('setItemEvent');
//在新定义的setItem函数内部，首先创建了一个名为setItemEvent的新事件实例。
//这个事件将用于通知其他脚本有新的存储项被设置。

 setEvent.key = key;
 setEvent.newValue = val;
 // 这两行代码分别为刚创建的事件实例添加了自定义属性key和newValue，用来保存被设置的键名和值。

window.dispatchEvent(setEvent);
//通过window.dispatchEvent方法触发setItemEvent事件。
//任何之前通过window.addEventListener('setItemEvent', callbackFunction);注册的事件监听器都会被激活，并且可以通过事件对象访问到key和newValue。

signSetItem.apply(this , arguments);
//使用apply方法调用之前保存的原始setItem方法（即signSetItem），并传递当前的this上下文以及所有传给新setItem方法的参数。
//这样做确保了数据实际上被存储到了浏览器的本地存储中，同时保持了方法的原始功能和上下文。

步骤二：在main.js内引入

import customer from './utils/customer'
Vue.use(customer)

步骤三： 使用方法

//在JavaScript的事件处理函数中，this关键字可能不会指向你期望的Vue实例。
//通过将this赋值给变量that，可以在事件处理函数内部正确地引用Vue实例的上下文。
       let that = this;
       window.addEventListener('setItemEvent', function(event) {//setItemEvent为自定义事件
            console.log(event.newValue);//修改后的值
            console.log(event.newValue);//修改前的值
            console.log(event.key);//存入时的键
                                           
        });