Web 前端开发中用于「存储数据」的技术

localStorage、sessionStorage 和 Pinia 都是 Web 前端开发中用于「存储数据」的技术，但它们的用途、生命周期和使用场景完全不同。下面用一句话概括 + 详细对比，帮你快速理清。

一句话区分

名称	本质/位置	生命周期	典型用途
localStorage	浏览器磁盘存储	永久，手动清除才消失	记住登录态、主题、语言等
sessionStorage	浏览器内存存储	标签页关闭即清空	临时缓存表单、页面临时状态
Pinia	内存里的 JS 状态库	页面刷新就丢失*	全局组件间共享的响应式数据

* Pinia 只是运行时内存，刷新会丢；如果希望持久化，需要额外插件（如 pinia-plugin-persistedstate）把数据同步到 localStorage/sessionStorage/cookie。

1. localStorage & sessionStorage（浏览器存储）

相同点

容量约 5 MB（因浏览器而异）
只能存字符串（对象需 JSON.stringify/parse）
受「同源策略」限制（协议+域名+端口一致才可读写）
同步 API，阻塞主线程，不要存大量数据

不同点

维度	localStorage	sessionStorage
生命周期	永久	标签页/窗口关闭即清空
共享范围	同域名下所有标签页共享	仅当前标签页内共享
使用场景	长期偏好设置、自动登录	单页多步操作、临时草稿

代码示例：

// 存
localStorage.setItem('token', 'abc123');
sessionStorage.setItem('draft', JSON.stringify({ title: 'hello' }));

// 取
const tk = localStorage.getItem('token');
const draft = JSON.parse(sessionSessionStorage.getItem('draft') || '{}');

// 删
localStorage.removeItem('token');
sessionStorage.clear();

2. Pinia（Vue 生态的状态管理库）

定位：专门给 Vue3 使用的「中央数据仓库」，解决多层组件传值麻烦的问题
数据存在内存里，响应式；页面一刷新，store 回归初始值
核心概念：state（数据）、getters（计算属性）、actions（方法，可异步）
TypeScript 支持一流，DevTools 调试友好

最小示例：

// stores/counter.ts
import { defineStore } from 'pinia';

export const useCounter = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    inc() { this.count++; },
  },
});

// 组件里用
import { useCounter } from '@/stores/counter';
const counter = useCounter();
counter.inc();
console.log(counter.double);

持久化（可选）：

npm i pinia-plugin-persistedstate

TypeScript

// main.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
pinia.use(piniaPluginPersistedstate);

// store 里加 persist: true
defineStore('counter', {
  state: () => ({ count: 0 }),
  persist: true,
});

这样刷新页面后 count 仍保留，因为插件自动把数据同步到了 localStorage。

3. 什么时候选谁？

仅组件间共享、需要响应式 → Pinia
数据要跨标签页长期保存 → localStorage
数据只在该标签页生命周期内有效 → sessionStorage
既要响应式又要刷新不丢 → Pinia + 持久化插件（底层还是 localStorage）

一句话总结：
localStorage/sessionStorage 是“浏览器小硬盘”，Pinia 是“内存里的全局变量仓库”；想让仓库关机（刷新）不丢，就把仓库备份到硬盘。

除了 localStorage、sessionStorage 和 Pinia，前端常用的「数据存储/状态持久化」技术还可以按 “浏览器原生能力” 和 “状态管理库” 两大类继续补充，下面给你一份「脑图级」清单，并指出各自最适合的场景。

一、浏览器原生持久化能力

技术	容量*	生命周期	查询能力	典型场景
Cookie	≈4 KB	可设过期时间，随请求自动携带	键-值字符串	登录态、用户追踪
IndexedDB	≥250 MB	永久，手动或代码删除	事务、索引、游标	离线大文件、图片/视频缓存
Web SQL	50-200 MB	永久	标准 SQL（已废弃）	老项目兼容，不建议新用
CacheStorage	动态配额	永久	Request/Response 键值	PWA 离线资源、版本化缓存
File System Access API	用户授权	永久	目录/文件句柄	在线 IDE、本地文件编辑器

* 容量因浏览器及用户设置差异较大，仅做量级参考。

上手建议

小体积键值 → Cookie/localStorage
结构化/大体积 → IndexedDB（可配合 Dexie.js 封装）[ ^1^ ][ ^7^ ]
离线资源 → CacheStorage + Service Worker
需要操作用户真实文件 → File System Access API

二、主流状态管理库（均支持「内存响应式 + 可选持久化」）

名称	技术栈	持久化方案	特点
Redux	React 全家桶	redux-persist	时间旅行调试、生态最成熟
Zustand	React/TS	persist 中间件	轻量、hooks 风格，无样板代码 [ ^3^ ][ ^9^ ]
MobX	React/Vue 均可	mobx-persist-store	响应式、自动追踪依赖
Recoil/Jotai	React	官方或社区 persist	原子化细粒度状态
Vuex	Vue2	vuex-persistedstate	老牌集中式管理
Pinia	Vue3	pinia-plugin-persistedstate [ ^6^ ][ ^10^ ]	模块化、TS 友好
Svelte Store	Svelte	自定义或 svelte-persisted-store	编译期优化、极简语法