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);//存入时的键
});