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] = useState('');

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

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

Answer 2

localStorage可通过window对象获得。由于Next.js两次运行代码，一次在SSR期间在服务器中运行，一次在客户端中，因此它将无法在SSR期间访问window对象，因此会出错。

您要检查是否存在window对象，然后像这样访问localStorage —

!!window ? window.localStorage.getItem("myCart") : ""

检查环境中是否存在window对象，如果存在，则从localStorage获取值，否则返回空字符串。

静态NextJS站点中的localStorage：ReferenceError：未定义localStorage

2 个答案: