React：当用户关闭浏览器时删除 cookie答案

【问题标题】：React: Delete cookie when user closes the browserReact：当用户关闭浏览器时删除 cookie
【发布时间】：2019-04-28 01:33:28
【问题描述】：

我正在使用库 react-cookie (https://www.npmjs.com/package/react-cookie)，我想在浏览器或选项卡关闭时删除用户 cookie。我在我的 Approuter 中使用了 ComponentWillUnmount，但是当浏览器关闭时它不起作用。有人知道如何实现吗？

import React from 'react';
import {Router, Route, Switch} from 'react-router-dom';
import history from '../data/history';
import { withCookies, Cookies } from 'react-cookie';
import { instanceOf } from 'prop-types';


class AppRouter extends React.Component{

static propTypes = {
    cookies: instanceOf(Cookies).isRequired
};


constructor(props){
    super(props)
}

componentWillMount(){
    const {cookies} = this.props;
    cookies.remove('userInfo');
}

render(){
    return(
        <Router history={history}>
            <div>
                <Header/>
                <div className="main-container">
                    <Switch>
                        //routes
                    </Switch>
                    <Footer/>
                </div> 
            </div>
        </Router>
    );
}
}

export default withCookies(AppRouter);

路由器确实收到了 cookie，为什么我不能用 componentWillUnmount 删除它？以及如何删除它们？

【问题讨论】：

去掉过期时间，cookie不会被删除吗？ AFAIK 没有过期日期的 cookie 仅持续该特定会话。
我的 cookie 没有过期数据@Mirakurun
好吧，那么它应该在会话结束时过期。 security.stackexchange.com/a/33748
对不起，我的错。没有看到您也想在标签关闭时删除它。这个不适合那种情况，是的。
是的，没问题，@mirakurun

标签： javascript reactjs cookies react-cookie

【解决方案1】：

不是 React 特定的，但你可以使用它：

window.addEventListener("beforeunload", (ev) => 
{  
    ev.preventDefault();
    cookies.remove('userInfo');
});

也许在挂载时调用它，这样你就可以访问你的类实例。

【讨论】：

【解决方案2】：

这可能对你有帮助...

componentDidMount(){
    window.addEventListener(
        "beforeunload",
        cookies.remove('userInfo')
    );
}

【讨论】：

【解决方案3】：

当您创建 cookie 时。请将过期时间设置为 0。例如

cookies.set('userInfo', name, { expires: 0 });

那么这个cookie会在浏览器关闭时过期。

【讨论】：

这在浏览器完全关闭时有效，但在选项卡关闭时无效。有什么建议吗？