如何结合useState与localStorage实现div关闭后刷新页面不再显示

现有代码问题 #

• 初始化逻辑错误：当前代码会在用户首次访问时直接写入hideDiv = 1，和「点击关闭后才永久隐藏」的需求不符
• 关闭操作未同步存储：点击关闭按钮仅修改了组件内的isVisible状态，没有更新 localStorage，刷新后状态会重置
• localStorage key 存在多余空格：原代码中'hideDiv '末尾的空格会导致读取、存储的key不一致，出现逻辑异常

修正后实现（客户端渲染场景） #

直接在 useState 初始化时读取 localStorage 状态，点击关闭时同步写入存储即可：

import { useState } from 'react'

function YourComponent() {
  // 首次渲染时从localStorage读取状态，未关闭过则默认显示
  const [isVisible, setIsVisible] = useState(() => {
    return localStorage.getItem('hideDiv') !== 'true'
  })

  const handleClose = (e) => {
    e.preventDefault() // 阻止a标签默认跳转行为
    setIsVisible(false)
    // 关闭时同步写入localStorage
    localStorage.setItem('hideDiv', 'true')
  }

  if (!isVisible) return null

  return (
    <div className="absolute right-5 text-gray flex text-white">
      <a href="#" onClick={handleClose}>
        x
      </a>
      ... 文本内容 ...
    </div>
  )
}

兼容服务端渲染（SSR）场景 #

如果是 Next.js 等 SSR 框架，服务端不存在 localStorage 对象，需要用 useEffect 在客户端侧初始化状态：

import { useState, useEffect } from 'react'

function YourComponent() {
  const [isVisible, setIsVisible] = useState(true)

  // 客户端渲染完成后读取localStorage状态
  useEffect(() => {
    if (localStorage.getItem('hideDiv') === 'true') {
      setIsVisible(false)
    }
  }, [])

  const handleClose = (e) => {
    e.preventDefault()
    setIsVisible(false)
    localStorage.setItem('hideDiv', 'true')
  }

  if (!isVisible) return null

  return (
    <div className="absolute right-5 text-gray flex text-white">
      <a href="#" onClick={handleClose}>
        x
      </a>
      ... 文本内容 ...
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Niic