javascript - 如何在下一个 js 中使用本地或 session 存储

Question

当我从我的 ssr 应用程序获得响应时，我试图将项目设置为 session 存储，但它显示未定义 session 存储的错误，因为在服务器端没有这样的存储，只有 cookie 但我没有需要那个。
所以我的问题是如何从 NextJS 中的 getInitialProps 将项目设置为 sessionStorage

Answer 1

我为此创建了一个自定义 Hook 以避免 SSR 错误。 useEffect 内的代码钩子(Hook)只会在客户端执行，所以你不需要检查 window .
钩子(Hook)/useSessionStorage.js

import { useState, useEffect } from "react";

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

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

  return value
}

export default useSessionStorage

SomeComponent.js

import useSessionStorage from '../hooks/useSessionStorage'

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

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