next.js - 静态 NextJS 站点中的 localStorage : ReferenceError: localStorage is not defined

Question

我正在尝试在 NextJS 静态站点上使用 localStorage，但遇到 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>)
</>
);
}

知道是否可以在 NextJS 静态站点上使用 localStorage 或者我做错了什么？
谢谢!

Answer 1

我用过 use-persisted-state :

import createPersistedState from 'use-persisted-state';

const useCartState = createPersistedState('cart');

export default function Category() {
     
  const [cart, setCart] = useCartState('');

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

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