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

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

我使用了持久化状态：

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>)
</>
);
}

Answer 2

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

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

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

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

Answer 3

这是如何使用一种称为惰性初始化的技术来实现的。在组件顶部创建函数。

const getInitialState =()=>localStorage.getItem("myCart");
export default function Category() {
const [cart, setCart] = useState(
getInitialState || ""
);
useEffect(() => {
localStorage.setItem("myCart", cart);
}, [cart]);
function addItem() {
setCart("item")   
}
return (
<>
<button onClick={addItem}>Add</button>)
</>
);
}