状态持久化存储

在Web开发中，将状态保存到浏览器的本地存储（localStorage）或会话存储（sessionStorage）中是一个常见的需求，尤其是在需要跨页面持久化数据或仅在会话期间存储数据时。下面是如何使用这两种存储方式的基本方法：

1. 使用localStorage保存状态

localStorage是一种Web存储API，允许你在用户的浏览器中存储数据，并且数据没有过期时间（即直到被清除之前都会一直存在）。

设置数据

	// 将字符串化的JSON对象保存到localStorage中
	localStorage.setItem('key', JSON.stringify({name: 'John Doe', age: 30}));
	// 或者直接存储简单类型的数据
	localStorage.setItem('username', 'JohnDoe');

读取数据

	// 读取数据并解析为JSON对象
	const user = JSON.parse(localStorage.getItem('key'));
	console.log(user.name); // 输出: John Doe
	// 读取简单类型的数据
	const username = localStorage.getItem('username');
	console.log(username); // 输出: JohnDoe

移除数据

	localStorage.removeItem('key');
	localStorage.removeItem('username');

清除所有存储

localStorage.clear();

2. 使用sessionStorage保存状态

sessionStorage和localStorage非常相似，但它存储的数据仅在当前浏览器标签页会话期间有效，在页面会话结束时（例如，当页面被关闭时），数据会被清除。

设置数据

	// 使用sessionStorage设置数据
	sessionStorage.setItem('key', JSON.stringify({name: 'Jane Doe', age: 25}));
	sessionStorage.setItem('loggedIn', 'true');

读取数据

	// 读取并解析sessionStorage中的数据
	const user = JSON.parse(sessionStorage.getItem('key'));
	console.log(user.name); // 输出: Jane Doe
	// 读取简单数据
	const loggedIn = sessionStorage.getItem('loggedIn');
	console.log(loggedIn); // 输出: true

移除数据

	sessionStorage.removeItem('key');
	sessionStorage.removeItem('loggedIn');

注意：

• localStorage和sessionStorage都只能存储字符串。对于对象或数组，你需要先将其转换为字符串（如使用JSON.stringify()），在读取时再进行解析（如使用JSON.parse()）。
• 存储的数据量有限制（通常是几MB），但具体限制取决于浏览器。
• 出于安全考虑，避免在localStorage或sessionStorage中存储敏感信息，如密码或身份验证令牌。
• 使用这些存储方式时，要考虑到用户的隐私和数据保护政策。

3. pinia-plugin-persistedstate

• 用途：用于 Pinia 状态管理库的持久化存储。Pinia 是 Vue.js 的一个状态管理库，类似于 Vuex，但更易于使用和集成到 Vue 3 生态系统中。
• 功能：
  • 将 Pinia 中的状态持久化到浏览器的 localStorage 或 sessionStorage 中。
  • 允许选择性地持久化特定模块的状态，通过配置 filter 参数实现。
  • 支持自定义序列化和反序列化逻辑，以处理复杂数据类型。
• 使用方式：
  1. 安装插件：npm install pinia-plugin-persistedstate 或 yarn add pinia-plugin-persistedstate。
  2. 在 Pinia 实例中添加插件，并可选地配置 key 名称和 filter：

     	import { createPinia } from 'pinia';
     	import persistedstate from 'pinia-plugin-persistedstate';
     	const pinia = createPinia();
     	pinia.use(persistedstate, {
     	key: 'my-app-state',
     	filter: (module) => module.moduleName === 'users'
     	});

4. vuex-persistedstate

• 用途：用于 Vuex 状态管理库的持久化存储。Vuex 是 Vue.js 的官方状态管理库，用于在多个组件之间共享状态。
• 功能：
  • 将 Vuex 的状态保存到浏览器的 localStorage 或 sessionStorage 中。
  • 支持自定义存储引擎，以及自定义序列化和反序列化逻辑。
• 使用方式：
  1. 安装插件：npm install vuex-persistedstate 或 yarn add vuex-persistedstate。
  2. 在 Vuex store 的配置中添加插件：

     	import Vue from 'vue';
     	import Vuex from 'vuex';
     	import createPersistedState from 'vuex-persistedstate';
     	Vue.use(Vuex);
     	const store = new Vuex.Store({
     	// ... 其他配置
     	plugins: [createPersistedState()]
     	});

总结

• 共同点：两者都用于 Vue.js 应用程序中状态管理库的持久化存储，旨在解决页面刷新或重新加载后状态丢失的问题。
• 不同点：服务于不同的状态管理库（Pinia 和 Vuex），但核心功能和用法相似。
• 使用场景：在需要跨页面或浏览器会话保持状态的应用程序中，这两个插件都非常有用，特别是在用户期望其数据在重新加载页面后仍然可用的场景中。