如何在 getServerSideProps 中获取本地存储数据

我正在使用 NextJS 12。我正在尝试获取本地存储对象。当我在 getServerSideProps 中使用 localstorage 时,会收到类似 ReferenceError: localStorage is not defined 的错误。我也尝试在函数之外使用它,但仍然出现此错误。有没有办法在 getServerSideProps 中使用它。

export async function getServerSideProps({ query }) {
    const id = query.id;
    const getData = JSON.parse(localStorage.getItem("form"));
    console.log(getData)

    return {
      props: {},
}
stack overflow How I can get localstorage data inside getServerSideProps
原文答案
author avatar

接受的答案

欢迎来到stackoverflow,因为它指的是 documentation

如果您从页面中导出一个称为 getServerSideProps (服务器端渲染)的函数,则Next.js将使用GetServerversideProps返回的数据在每个请求上预段此页面。

localStorage仅在客户端上可用

if (typeof window !== 'undefined') {
// your code 
  const id = query.id;
    const getData = JSON.parse(localStorage.getItem("form"));
    console.log(getData)

}

请查看 this article 以获取有关仅运行客户端代码的更多信息。

另一种方法是使用 dynamic import ,其中Hello3组件包含访问本地存储的代码。

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

答案:

作者头像

另一种方法是使用 cookie 而不是使用 localstorage ,我在开发最后一个应用程序时遇到了同样的问题,我使用 nookies 包解决了它

Nookies: A collection of cookie helpers for Next.js