localStorage в stati c Next JS site: ReferenceError: localStorage не определен

Question

Я пытаюсь использовать localStorage на сайте Next JS stati c, но запуск в localStorage не определен с ошибкой.

Мой код для компонента, в котором отображается ошибка:

export default function Category() {

const [cart, setCart] = useState(
        localStorage.getItem("myCart") || ""
    );

 useEffect(() => {
        localStorage.setItem("myCart", cart);
    }, [cart]);

function addItem() {
            setCart("item")   
    }

return (
<>
<button onClick={addItem}>Add</button>)
</>
);
}

Есть идеи, можно ли использовать localStorage на сайте Next JS stati c или я делаю что-то не так?

Спасибо!

Answer 1

Я использовал use-persisted-state :

import createPersistedState from 'use-persisted-state';

const useCartState = createPersistedState('cart');

export default function Category() {

  const [cart, setCart] = useState('');

  function addItem() {
    setCart("item");
  }

  return (
    <>
      <button onClick={addItem}>Add</button>)
    </>
  );
}

Answer 2

localStorage доступно через объект window. Вам может потребоваться получить к нему доступ так - window.localStorage.getItem("myCart") || ""