LocalStorage页面监听变化

原创已于 2023-01-17 17:57:24 修改 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5

于 2023-01-17 08:39:56 首次发布

页面A设置LocalStorage的name键值为当前时间戳。页面B中，使用React的useEffectHook添加了一个存储事件监听器，定义了回调函数fn来处理事件，当组件卸载时移除监听器。

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