NextJS localStorage.getItem() 方法不适用于组件？答案

【问题标题】：NextJS localStorage.getItem() method not working on components?NextJS localStorage.getItem() 方法不适用于组件？
【发布时间】：2022-11-02 21:29:49
【问题描述】：

在我的nextjs-app 中，我想使用localstorage 在我的应用程序中存储一些值。

所以在pages-文件夹中我有一个[slug].tsx-文件，我在其中执行此操作：

export default function Page({ data}) {

   useEffect(() => {
     const page = {
       title: data.page.title,
       subtitle: data.page.subtitle,
       slug: data.page.slug,
     }

     localStorage.setItem("page", JSON.stringify(page))
  })

  return ( ... some html....)
}

这基本上存储了当前路线的标题、副标题和 slug。

现在，在我的components-文件夹中，我有一个Nav.tsx-文件，我在其中执行以下操作：

const Nav= () => {
  const [pageData, setPageData] = useState()

  useEffect(() => {
     const current = JSON.parse(localStoraget.getItem('page'))
     if(current){
        setPageData(current)
     }
  },[])

  return(...some html)

 }

到目前为止，setItem 有效，并且在我可以看到的谷歌检查器的application-选项卡中，每次呈现新的路由/页面时，键值都会发生变化，但 getItem- 总是返回相同的例如关键值根本没有改变。我究竟做错了什么？是不是因为 Nav 组件只被渲染一次？

有人可以帮我吗？

【问题讨论】：

是的，Nav 组件渲染一次，那是调用 useEffect 的时候。 useEffect 在 [] 中需要一个值，并且每次更改此值时都会调用它。

标签： javascript reactjs next.js local-storage

【解决方案1】：

您的拼写错误来自：

localStoraget.getItem('page')

至：

localStorage.getItem('page')

相信您的问题也属于 localstorage 应该与 async/await 一起使用，所以也许可以尝试以下操作：

const Nav= () => {
  const [pageData, setPageData] = useState()

  useEffect(() => {
    async function settingData() {
      const current = await JSON.parse(localStorage.getItem('page'))
      if(current)setPageData(current)
    }
    settingData()
  },[])

  return(...some html)
}

【讨论】：