vue3中持久化封装及使用

封装js

// src/utils/storage.jsexportconstuseStorage=(key,defaultValue=null)=>{constget=()=>{try{constitem=localStorage.getItem(key);returnitem?JSON.parse(item):defaultValue;}catch(e){console.warn(`读取${key}失败`,e);returndefaultValue;}};constset=(value)=>{try{localStorage.setItem(key,JSON.stringify(value));}catch(e){console.warn(`保存${key}失败`,e);}};constremove=()=>{localStorage.removeItem(key);};return{get,set,remove};};

解读：

1. get () 读取
   无存储值：返回传入的 defaultValue
   存储存在：返回解析后的对象 / 基础类型
   JSON 解析报错：打印警告，返回默认值

const store = useStorage('demo', { a: 1 }) console.log(store.get())

2. set (value) 写入
   支持任意可 JSON 序列化类型：对象、数组、字符串、数字、布尔。
   注意：不能存函数、DOM、循环引用对象，会序列化报错

const infoStore = useStorage('info') infoStore.set('字符串') infoStore.set(999) infoStore.set(true) infoStore.set([1,2,3]) infoStore.set({ name: '警务平台' })

3. remove () 删除对应 key

const tokenStore = useStorage('token') tokenStore.remove() // localStorage中token直接清除

写法1：

// 登录 token、用户信息存储<script setup>import{useStorage}from'@/utils/storage'// 1. 初始化，指定key和默认值consttokenStore=useStorage('token','')constuserStore=useStorage('userInfo',null)// 存数据：登录成功后保存token、用户信息constlogin=()=>{consttoken='abc123xyz'constuser={id:1,name:'管理员',role:'admin'}tokenStore.set(token)userStore.set(user)}// 取数据：页面初始化、接口请求时读取constgetToken=()=>{returntokenStore.get()}constgetUser=()=>{returnuserStore.get()}// 删除数据：退出登录清空constlogout=()=>{tokenStore.remove()userStore.remove()}</script>

写法2：对象解构 + 别名重命名的写法

// 解构别名写法const{get:getLayout,set:saveLayoutToStorage,remove:clearLayoutStorage}=useStorage('dashboard_layout',[]);// 使用constdata=getLayout()saveLayoutToStorage([...])clearLayoutStorage()// 多存储 key 同时解构（项目多场景）// 布局存储const{get:getLayout,set:saveLayout}=useStorage('dashboard_layout')// 侧边栏状态存储const{get:getSidebar,set:saveSidebar}=useStorage('sidebar_collapse',false)// token存储const{get:getToken,set:setToken,remove:logoutClearToken}=useStorage('token','')

写法对比

• 简单状态（token、主题色）推荐写法 1；
• 复杂业务数据（拖拽布局、筛选表单、多字段配置）推荐你这种解构别名写法，可读性更高。

// 写法1：直接接收实例（简洁，通用）constlayoutStore=useStorage('dashboard_layout',[])layoutStore.get()layoutStore.set(data)// 写法2：解构别名（语义化，适合复杂业务）const{get:getLayout,set:saveLayoutToStorage}=useStorage('dashboard_layout',[])getLayout()saveLayoutToStorage(data)

常见业务实战案例

示例 1：登录 / 退出完整流程

<script setup>import{useStorage}from'@/utils/storage'consttokenStore=useStorage('token','')constuserStore=useStorage('user',null)// 登录consthandleLogin=async()=>{constres=awaitapi.login(form)tokenStore.set(res.data.token)userStore.set(res.data.user)}// 退出consthandleLogout=()=>{tokenStore.remove()userStore.remove()router.push('/login')}// 页面初始化读取用户constuser=userStore.get()</script>

示例 2：保存页面筛选条件（刷新页面不丢失）

<script setup>import{useStorage}from'@/utils/storage'// 默认筛选条件constfilterStore=useStorage('portalFilter',{name:'',type:'all'})// 页面加载读取筛选条件回填表单constfilterParams=filterStore.get()// 查询时保存筛选条件constsearch=()=>{filterStore.set(filterParams)// 请求接口...}// 重置清空存储constreset=()=>{filterStore.remove()}</script>

注意事项 & 踩坑点

1. 每次调用 useStorage(key) 会生成全新实例
   不要重复创建实例操作同一个 key，建议提前定义变量复用：

// 不推荐（重复实例）useStorage('token').set('xxx')useStorage('token').get()// 推荐（复用实例）consttokenStore=useStorage('token')tokenStore.set('xxx')tokenStore.get()

2. localStorage 同步阻塞，大量数据读写不建议频繁调用
3. 存储大数据超出容量会触发 set 内 catch 警告，不会报错崩溃
4. 默认值仅在读取失败 / 无数据时生效，不会自动写入本地
5. 仅存储到当前域名，无痕模式关闭浏览器数据会清空
6. 不支持响应式：get() 获取的值是静态副本，本地存储变更不会自动更新页面变量
   如果需要响应式，可封装一层 ref，如下：

<script setup>import{ref}from'vue'import{useStorage}from'@/utils/storage'constuserStore=useStorage('user',null)constuser=ref(userStore.get())constupdateUser=(newVal)=>{userStore.set(newVal)user.value=newVal// 手动更新响应式变量}</script>