有时候业务中会需要监听缓存的变化，实时更新页面的内容获取发送接口请求。这就要我们来监听对localstorage的修改，实时响应变化！！一下方法同样实用于vue项目。
同一个项目中不同页面的实现
-
实现效果
-
代码分析
修改localstoare的页面，很简单直接使用自带的api实现
import { useEffect } from "react";
function LocalStorage() {function handleChangeName() {localStorage.setItem("name", "zhangsan" + Math.random());}return (<><h1>Local Storage</h1><button onClick={handleChangeName}>提交</button></>);
}export default LocalStorage;
监听修改的页面,监听storage即可。
function Ref() {useEffect(() => {window.addEventListener("storage", (e) => {console.log("storage", e);});return () => {};}, []);return (<>....</>);
}
由于storage的限制，上面只能在不同的页面中进行监听修改，如果要在同一页面中监听，我们该怎么实现？
同一个项目中同一个页面的实现
- 实现效果
- 实现代码
useEffect周期中，dispatchEvent来监听我们的自定义事件new CustomEvent
import { useEffect } from "react";function LocalStorage() {useEffect(() => {// 模拟触发自定义的 StorageEventwindow.addEventListener("localStorageChange", (e) => {console.log(e);});return () => {};}, []);// 模拟触发自定义的 StorageEventconst triggerCustomStorageEvent = () => {const key = "name";const value = "zhangsan" + Math.random();localStorage.setItem(key, value);const storageEvent = new CustomEvent("localStorageChange", {detail: { key, value },});window.dispatchEvent(storageEvent);};return (<><h1>Local Storage</h1><button onClick={triggerCustomStorageEvent}>自定义提交</button></>);
}export default LocalStorage;
总结
以上是比较常见的两种简单的方法，当然还有其他的实现，比如事件轮询，对localstorage进行封装拦截等等，都可以去尝试下，有空我再补充完善吧。
