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

我试图在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>)
</>
);
}

导出默认函数类别（）{
const[cart，setCart]=useState(
localStorage.getItem（“myCart”）| |“”
);
useffect（（）=>{
setItem（“myCart”，cart）；
}，[cart]）；
函数addItem（）{
setCart（“项目”）
}
返回(
添加）
);
}

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

谢谢

我用过：

从“使用持久化状态”导入createPersistedState；
const useCartState=createPersistedState（'cart'）；
导出默认函数类别（）{
const[cart，setCart]=useCartState（“”）；
函数addItem（）{
setCart（“项目”）；
}
返回(
添加）
);
}

localStorage

可通过

窗口

对象获得。由于Next.js在代码中运行了两次，一次在服务器上运行，一次在客户端运行，因此在SSR期间，它将无法访问

窗口

对象，因此会出现错误

您需要检查

窗口

对象是否存在，然后像这样访问

本地存储

-

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

---

检查环境中是否存在

window

对象，如果存在，则从

localStorage

获取值，否则返回空字符串。

window对象最初在页面加载时不存在于NextJS中，这是由于在开发时出现了SSR，因此会出现错误。