Chrome首次加载页面时sessionStorage不生效问题求助

问题复现代码 #

import { useEffect, useState } from 'react';
import './App.css'

function App() {
    localStorage.setItem("hi1", '1');
    sessionStorage.setItem("hi2", '2');

  return (
    <>
      <p>hi</p>
    </>
  )
}

export default App

问题现象 #

首次打开页面时，localStorage正常保存数据，但sessionStorage无数据；仅在F5刷新页面后，sessionStorage才会写入成功。该问题仅出现在Chrome最新版本，Firefox、Edge浏览器无此异常。

解决方案及原因分析 #

• 将存储操作移至useEffect钩子中
  组件函数体在React渲染阶段执行，此时Chrome可能尚未完全初始化sessionStorage的会话上下文，导致写入失败。而useEffect会在组件挂载完成后（DOM渲染完毕）执行，属于浏览器事件循环的宏任务阶段，此时sessionStorage的上下文已稳定，可正常写入。修改后的代码：

  import { useEffect } from 'react';
  import './App.css'
  
  function App() {
    useEffect(() => {
      localStorage.setItem("hi1", '1');
      sessionStorage.setItem("hi2", '2');
    }, []); // 空依赖确保仅挂载时执行一次
  
    return (
      <>
        <p>hi</p>
      </>
    )
  }
  
  export default App
  

• 检查Chrome隐私设置
  确认是否开启了「阻止第三方Cookie和网站数据」，本地开发环境下建议关闭该设置（仅针对localhost域名），避免存储被拦截。

• 清除Chrome缓存与存储
  旧的缓存或残留的存储数据可能引发异常，可通过F12 > Application > Storage > Clear site data清除相关数据后重试。

补充说明 #

该问题并非个例，部分Chrome用户在Vite开发环境下遇到过类似情况，核心原因是组件渲染时机与浏览器存储初始化时机不匹配，通过useEffect调整执行时机即可解决。

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