pinia需借助pinia-plugin-persistedstate插件实现sessionstorage持久化，支持按字段（paths）精确控制、自动降级，但敏感数据不可存储；单字段同步可选用@vueuse/core的usesessionstorage。

Pinia 本身不自动保存状态，要让数据在当前标签页生命周期内“记住”，就得用 sessionStorage —— 它比 localStorage 更轻量、关掉标签就清空，适合临时状态，比如表单草稿、筛选条件、当前页码等。

安装并注册插件

最常用的方式是借助 pinia-plugin-persistedstate，它支持直接指定存储介质：

• 安装：npm install pinia-plugin-persistedstate
• 在 main.ts 中注册（注意不是全局启用，只是加载插件）：
  

  const pinia = createPinia();<br>
    pinia.use(piniaPluginPersistedstate);<br>
    app.use(pinia);

在 Store 中启用 sessionStorage 持久化

每个 store 可独立配置，只需在定义时加上 persist 选项，并明确指定 storage: sessionStorage：

Build Session

支持专注的自主工作时段，构建、创作或产出一个具体成果，并高效记录和提交进度。

下载

• 只存你真正需要的字段，用 paths 精确控制，避免误存敏感内容：
  

  persist: {<br>
      storage: sessionStorage,<br>
      paths: ['searchKeyword', 'currentPage', 'sortBy']<br>
    }

• 如果整个 state 都想存（不推荐），可写 persist: { storage: sessionStorage }，但要注意 JSON 序列化限制（不能存函数、Date、Map 等）

避开常见陷阱

sessionStorage 看似安全，实则仍有风险，尤其对敏感数据：

• token、用户身份、临时凭证等绝不能进 sessionStorage —— 它是纯前端可读、无加密、易被 XSS 窃取的存储方式
• 若需“保持登录态”，应只存 expiresAt 时间戳或 userId，token 始终保留在内存中，刷新后通过 refreshToken 重新获取
• 检查浏览器兼容性：无痕模式或某些旧版浏览器可能禁用 sessionStorage，插件会自动降级为内存存储，不报错但也不持久

替代方案：单字段用 useLocalStorage 更灵活

如果你只希望某几个简单字段（如主题色、语言偏好）和 sessionStorage 同步，不用整 store 持久化，可以考虑组合式函数：

• 安装 @vueuse/core，它提供 useSessionStorage（注意不是 useLocalStorage）
• 在 store 或组件中直接使用：
  const theme = useSessionStorage('app-theme', 'light');
  修改 theme.value 会自动写入 sessionStorage，页面重载后自动恢复