Как сохранять состояние открыта ли или закрыта боковая панель с помощью localstorage?

Question

[Anastasia Tovma]

Это мой первый опыт в использовании localstorage и я хочу сохранять состояние через хуки.
Нужно запоминать показана либо скрыта боковая панель фильтра. Пока что в коде все топорно просто и при обновлении страницы данные возвращаются на исходную позицию. Пожалуйста, сориентируйте в этом вопросе.

const TaskRegionView = () => {
    const [condition, setCondition] = useState(true);

    const handleToggleCondition = () => {
        setCondition(prev => !prev);
    };
....
<Button onClick={handleToggleCondition} className={styles['button']}>
                    <LeftOutlined />
                </Button>
                {condition && (
                    <>
                        <Button onClick={handleToggleCondition} className={styles['button-open']}>
                            <RightOutlined />
                        </Button>
                        <Filter
                            className={styles['filter']}
                        />
                    </>
                )}

Answer 1

[Ivan Ivanovich]

Не тестил, но должно воркать

const TaskRegionView = () => {
    const isMenuOpenLocalStorageKey = '__isMenuOpen';
  
    const [condition, setCondition] = useState(() => {
      const value = localStorage.getItem(isMenuOpenLocalStorageKey);

     const isOpen = JSON.parse(value);
      
      if (isOpen === null) return false;
      
      return value;
    });

    const handleToggleCondition = () => {
        setCondition((prev) => {
          const state = !prev;
          
          localStorage.setItem(isMenuOpenLocalStorageKey, JSON.stringify(state));
          
          return state;
        });
    };
...

Answer 2

[Александр]

usePersistedState