如何在next js中使用本地或会话存储

Question

当我从 ssr 应用程序收到响应时，我试图将项目设置为会话存储，但它显示错误，会话存储未定义，因为在服务器端没有这样的存储，只有 cookie，但我没有需要那个。

所以我的问题是如何从 NextJS 中的 getInitialProps 将项目设置为sessionStorage

Answer 1

我为此创建了一个自定义挂钩以避免 SSR 错误。挂钩内的代码useEffect将仅在客户端执行，因此您不需要检查window。

钩子/useSessionStorage.js

import { useState, useEffect } from "react";

const useSessionStorage = (name) => {
  const [value, setValue] = useState('')

  useEffect(() => {
    setValue(sessionStorage.getItem(name))
  }, [])

  return value
}

export default useSessionStorage

一些组件.js

import useSessionStorage from '../hooks/useSessionStorage'

const SomeComponent = () => {
  const zipCode = useSessionStorage('zipCode')

  return (
    <input value={zipCode} />
  )
}

Answer 2

sessionsStorage调用时不能设置项目getInitialProps，因为getInitialProps在服务器端运行。

在调用对象的方法时window，可以先判断该window对象是否未定义。

如果你使用钩子：

useEffect(() => {
    if (window) { 
      // set props data to session storage or local storage  
    }
}, []);