给localStorage缓存添加全局监听器_localstorage 监听-CSDN博客

本文链接：https://blog.csdn.net/wangshang1320/article/details/134594321

需求：在做单应用页面的时候，每个组件都是独立的，有时候我们a组件里面的东西修改了，需要b组件进行在a组件修改的同时进行响应，就需要监听器，这种时候我们需要定义监听器并且在b组件里面监听，然后在a组件触发

监听器：可以单独定义一个监听器（事件分发类），也可以用原生提供的，或者直接绑在localStorage上面,这里说下帮在localStorage上面的吧，比较快捷方便

定义监听器（全局）：

const originalSetItem = localStorage.setItem;

localStorage.setItem = function (key, value) {
  const event: any = new Event('itemInserted');

  event.value = value; // Optional..
  event.key = key; // Optional..

  document.dispatchEvent(event);

  // @ts-ignore
  // eslint-disable-next-line
  originalSetItem.apply(this, arguments);
};

a组件触发监听器

localStorage.setItem('collapsed', collapsed ? '0' : '1');

b组件监听事件分发监听器

//监听事件
const localStorageSetHandler = function (e: any) {
  // localStorage
  if (e.key === 'collapsed') {
    //这里接受到了监听触发。做想要处理的事情
  }
};
document.addEventListener('itemInserted', localStorageSetHandler, false);
return () => {
  //组件移除需要把事件给移除掉
  document.removeEventListener('itemInserted', localStorageSetHandler);
};

这样就可以简单的实现全局事件分发了。如果想要更精细点的话可以自己定义一个监听类来实现

不过个人不建议经常使用分发器来做业务处理，除非是只有这种办法了，因为分发器是全局的，会破环各个组件之间的独立性；单页面应用应该遵循组件独立，模块独立原则，尽量不要互相有关联，（高内聚低耦合）才能让项目在后期更好维护。