在浏览器关闭时为 React 明确清除本地存储答案

【问题标题】：Explicitly clear localstorage on browser close for React在浏览器关闭时为 React 明确清除本地存储
【发布时间】：2020-06-28 17:35:28
【问题描述】：

我有一个带有 React 前端和 Java 后端的应用程序。我正在使用 JWT 并将令牌保存在本地存储中。关闭整个浏览器时如何清除本地存储？为了反应。我的菜单组件在这里（我根据令牌的存在进行更改。isUserLoggedIn 检查是否有令牌。

class MenuComponent extends Component {
  componentWillUnmount() {
    localStorage.clear();
  }
  render() {
    const isUserLoggedIn = AuthenticationService.isUserLoggedIn();
    return (
      <Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
        <Navbar.Brand href=''>MAP-Runner</Navbar.Brand>
        <Navbar.Toggle aria-controls='responsive-navbar-nav' />
        <Navbar.Collapse id='responsive-navbar-nav'>
          <Nav>
            {!isUserLoggedIn && (
              <li>
                <Link className='nav-link' to='/login'>
                  Вход
                </Link>
              </li>
            )}
            {isUserLoggedIn && (
              <li>
                <Link className='nav-link' to='/calculations'>
                  Расчеты
                </Link>
                <Link
                  className='nav-link'
                  to={{ pathname: `/calculation-types` }}
                >
                  Типы расчетов
                </Link>
                <Link className='nav-link' to={{ pathname: `/group-settings` }}>
                  Настройки кластеров
                </Link>
                <Link className='nav-link' to={{ pathname: `/ost-docs` }}>
                  Док-ты остатков
                </Link>
                <Link className='nav-link' to={{ pathname: `/artlists` }}>
                  Списки артикулов
                </Link>
                <Link className='nav-link' to={{ pathname: `/color-schemas` }}>
                  Цветовые схемы
                </Link>
                <Link
                  className='nav-link'
                  to='/logout'
                  onClick={AuthenticationService.logout}
                >
                  Выход
                </Link>
              </li>
            )}
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default withRouter(MenuComponent);

【问题讨论】：

尝试在componentWillUnmount生命周期中删除它？
在每个组件中？即使我不注销并关闭整个浏览器？

标签： javascript reactjs browser jwt local-storage

【解决方案1】：

如果您确定只需要使用本地存储，那么您可以在第一次挂载应用组件时运行清除本地存储的代码：

localStorage.clear()

不过，正如 Raymond Camden 所指出的，更好的选择是使用会话存储。

【讨论】：

【解决方案2】：

您可以使用 sessionStorage 代替 localStorage。

【讨论】：