LocalStorage页面监听变化

页面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>
    )
}