当前位置：首页 > article >正文

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

article 2024/12/28 6:01:24

有时候业务中会需要监听缓存的变化，实时更新页面的内容获取发送接口请求。这就要我们来监听对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(() => {
    // 模拟触发自定义的 StorageEvent
    window.addEventListener("localStorageChange", (e) => {
      console.log(e);
    });
    return () => {};
  }, []);
  // 模拟触发自定义的 StorageEvent
  const 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;