【React】监听 sessionStorage / localStorage 更新

• 刚开始会下意识想到用 useEffect 的依赖数组直接监听 useState 变化，但是事实是不行的

useEffect(()=>{
    useData(localStorage.getItem('test_data'))
},[localStorage.getItem('test_data')])

• 只能通过 js 原生去监听，但是要注意的是：

当存储区域在另一个文档的上下文中被修改时，会触发该接口storage的事件，但是：

• 这不适用于进行更改的同一页面 !
  这实际上是域中其他页面使用存储同步所做的任何更改的一种方式。
  其他域上的页面无法访问相同的存储对象。

export default function () {
  const [state, setState] = useState('');
  const click = () => {
    localStorage.setItem('test_data', String(Math.random()));
  };
  useEffect(() => {
    console.log('sessionStorage = ', state);
  }, [state]);
  const getStorage = () => {
    const item = localStorage.getItem('test_data') ?? '';
    console.log('getItem = ', item);
    setState(item);
  };
  useEffect(() => {
    window.addEventListener('storage', getStorage);

    return () => {
      window.removeEventListener('storage', getStorage);
    };
  }, []);
  return (<button onClick={click()} >测试</button>)
}

• 最后总结一下：还是老老实实的用store去存储然后进行监听吧。