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

KushagraMish

2022-01-24

3598

我正在使用 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: {},
}

reactjs , next.js

How I can get localstorage data inside getServerSideProps

原文答案

Ramakay

2022-01-24

原文

接受的答案

欢迎来到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

答案:

RobertoMLJr

2022-07-21 0 原文

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

Nookies: A collection of cookie helpers for Next.js

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

答案:

相关问题

标签