useLocalStorageEffect

监听 localstorage 发生变化的 hook

复制

import { useEffect , useState} from 'react';
import { log , LocalStorage, overrideLocalStorage, resetLocalStorage} from '@siroi/fe-utils';
import {useLocalStorageEffect} from '@siroi/react-utils';
export default () => {

    const [value, setValue] = useState<string>(LocalStorage.getItem('starlight-theme') || '-');

    useLocalStorageEffect((key: string)=>{
        setValue(key)
    }, ['key', 'name'])

    useEffect(() => {
        // LocalStorage.overrideLocalStorage();
        overrideLocalStorage();
        console.log(localStorage);
        log.success('haha', 'hello')
        setTimeout(()=>{
            localStorage.setItem('key', 'world2')
        }, 2000);
        setTimeout(()=>{
            localStorage.setItem('name', 'siroi')
        }, 4000);
        return () => {
            resetLocalStorage();
        }
    }, []);

    return <div>Hello,{value}</div>;
}

可以在 当前页面 打开控制台，输入

localStorage.setItem('key', 1234);

观察上面例子中发生的变化