如何在下一个 js 中使用本地或会话存储

Question

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

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

Answer 1

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

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

如果你使用钩子：

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

Answer 2

getInitialProps 将在客户端或服务器端执行。因此，您需要在服务器端阻止访问 sessionStorage。

Page.getInitialProps = async (context) => {
  if (typeof window !== 'undefined') {
    window.sessionStorage.set('item', 'itemValue')
  }
}

Answer 3

我为此创建了一个自定义挂钩以避免 SSR 错误。 useEffect hook 中的代码只会在客户端执行，所以你不需要检查 window.

hooks/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} />
  )
}

如何在下一个 js 中使用本地或会话存储

How to use local or session storages in next js

javascript

local-storage

reactjs

server-side-rendering

next.js