页面A
import React, { useEffect, useState } from 'react'
export default function Detail(props) {
const [price, setPrice] = useState(0)//设置初始变量
useEffect(() => {
//页面初次加载时候进行ser更改
localStorage.setItem('ser', new Date().getTime());
}, [])
const onclick = () => {
//点击对name进行更改
localStorage.setItem('name', new Date().getTime());
//更改价格
setPrice(1000)
}
return <button onClick={onclick}>价格{price}</button>
}
页面B
import React, { useEffect, useState } from 'react'
export default function Detail(props) {
//初始化值
const [price, setPrice] = useState(0)
useEffect(() => {
//定义监听函数
const fn = (a, b) => {
//打印触发的更改是什么
console.log(a.key);
//如果是name更改,则进行赋值
if (a.key === 'name') {
setPrice(1000)
}
}
//注册事件监听
window.addEventListener('storage', fn)
return () => {
//销毁事件监听
window.removeEventListener('storage', fn)
}
}, [])
return (
<div>
价格:{price}
</div>
)
}