reactjs - 如何在react中监听localstorage值的变化？

Question

我想在用户登录时显示一个按钮。如果用户未登录，则我不会显示按钮。当用户登录时，我将设置本地存储值。当我在登录组件中设置本地存储时， header 组件必须监听该事件并显示按钮。我正在使用 addEventListener 进行监听。但它没有监听。

我不知道在 header 组件中监听哪里。

//HeaderComponent(header.js):

class HeaderComponent extends Component {
    componentDidMount(){
        if(typeof window!='undefined'){
            console.log(localStorage.getItem("token"));
            window.addEventListener("storage",function(e){
               this.setState({ auth: true});
            })
        }
    } 
    render() {

    return (
        <div className="header">
            <div className="container">
                <div className="header-content">
                    <img src={logo} alt="logo"></img>
                    <div className="nav-links" >
                        <ul >
                            <li>Home</li>
                            <li>About</li>
                            <li>Services</li>
                            <li><NavLink activeClassName="active" to="/upload" >Upload</NavLink></li>
                            <li><NavLink activeClassName="active" to="/signup"> Sign Up</NavLink></li>


                           { this.state.auth? <li onClick={this.onLogout}>Logout</li> :null}

                        </ul>
                    </div>
                </div>
            </div>

        </div>
    );
   }  
}

//loginComponent(login.js)

class LoginComponent extends Component {
    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onSubmit(event) {
        const data = {
            username: document.getElementById('name').value,
            password: document.getElementById('password').value
        }
        axios.post(`http://localhost:4000/user/login`, data).then(res => {
            this.props.history.push("/");
            localStorage.setItem("token",res.data.token);
            localStorage.setItem("auth",true);
        }).catch(err => console.log(err));
    }


    render() {
        return (
            <section class="log-in">
                <div class="card-col">
                    <form>
                        <h3>LOG IN</h3>
                        <div class="form-controls">
                            <input id="name" type="text" placeholder="username" class="input"></input>
                        </div>
                        <div class="form-controls">
                            <input id="password" type="password" placeholder="password" class="input"></input>
                        </div>
                        <button type="submit" onClick={this.onSubmit} class="button" >Log in</button>
                    </form>
                </div>

           </section>

        )
    }

}

Answer 1

当前的答案忽略了一个非常简单且安全的选项:window.dispatchEvent。

在您设置 localStorage 项的位置，如果您同时分派(dispatch)事件，则同一浏览器选项卡中的 eventListener (无需打开另一个或弄乱状态)也会拾取它:

const handleLocalStorage = () => {
    window.localStorage.setItem("isThisInLocalStorage", "true");
    window.dispatchEvent(new Event("storage"));
};

window.addEventListener('storage', () => {
    console.log("Change to local storage!");
    // ...
})

编辑:

因为这似乎很有帮助，所以我还建议检查 usehooks-ts 中的 useLocalStorage Hook 。团队。您不需要将其作为软件包安装；你可以直接复制钩子(Hook)批发。这个钩子(Hook)利用了我最初分享的解决方案，但添加了很多更复杂的逻辑。