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

Posted 2023-03-10

【中文标题】在浏览器关闭时为 React 明确清除本地存储

【英文标题】：Explicitly clear localstorage on browser close for 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生命周期中删除它？

在每个组件中？即使我不注销并关闭整个浏览器？

【参考方案1】：

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

localStorage.clear()

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

【参考方案2】：

您可以使用 sessionStorage 代替 localStorage。