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

【问题标题】：How to use local or session storages in next js如何在下一个 js 中使用本地或会话存储
【发布时间】：2021-11-23 03:11:47
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs local-storage next.js server-side-rendering

【解决方案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

SomeComponent.js

import useSessionStorage from '../hooks/useSessionStorage'

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

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

【讨论】：

这将如何在客户端设置值？

【解决方案2】：

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

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

如果你使用钩子：

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

【讨论】：

【解决方案3】：

getInitialProps 将在客户端或服务器端执行。所以，你需要防止在服务器端访问sessionStorage。

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

【讨论】：