文章目录
- 刚开始会下意识想到用 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
去存储然后进行监听吧。