react18中如何监听localstorage的变化获取最新的本地缓存

embedded/2024/10/25 3:34:45/

有时候业务中会需要监听缓存的变化，实时更新页面的内容获取发送接口请求。这就要我们来监听对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;