Явное удаление локальных хранилищ в браузере для React

Question

У меня есть приложение с 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);

Answer 1

Если вы уверены, что вам нужно использовать только локальное хранилище, вы можете запустить код, когда компонент приложения монтируется в первый раз, чтобы очистить локальное хранилище:

localStorage.clear ()

Хотя, как указал Рэймонд Камден, лучшим вариантом было бы использовать Session Storage.

Answer 2

Вы можете использовать sessionStorage вместо localStorage.