封装js// src/utils/storage.jsexportconstuseStorage(key,defaultValuenull){constget(){try{constitemlocalStorage.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};};解读get () 读取无存储值返回传入的 defaultValue存储存在返回解析后的对象 / 基础类型JSON 解析报错打印警告返回默认值const store useStorage(demo, { a: 1 }) console.log(store.get())set (value) 写入支持任意可 JSON 序列化类型对象、数组、字符串、数字、布尔。注意不能存函数、DOM、循环引用对象会序列化报错const infoStore useStorage(info) infoStore.set(字符串) infoStore.set(999) infoStore.set(true) infoStore.set([1,2,3]) infoStore.set({ name: 警务平台 })remove () 删除对应 keyconst tokenStore useStorage(token) tokenStore.remove() // localStorage中token直接清除写法1// 登录 token、用户信息存储script setupimport{useStorage}from/utils/storage// 1. 初始化指定key和默认值consttokenStoreuseStorage(token,)constuserStoreuseStorage(userInfo,null)// 存数据登录成功后保存token、用户信息constlogin(){consttokenabc123xyzconstuser{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,[]);// 使用constdatagetLayout()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直接接收实例简洁通用constlayoutStoreuseStorage(dashboard_layout,[])layoutStore.get()layoutStore.set(data)// 写法2解构别名语义化适合复杂业务const{get:getLayout,set:saveLayoutToStorage}useStorage(dashboard_layout,[])getLayout()saveLayoutToStorage(data)常见业务实战案例示例 1登录 / 退出完整流程script setupimport{useStorage}from/utils/storageconsttokenStoreuseStorage(token,)constuserStoreuseStorage(user,null)// 登录consthandleLoginasync(){constresawaitapi.login(form)tokenStore.set(res.data.token)userStore.set(res.data.user)}// 退出consthandleLogout(){tokenStore.remove()userStore.remove()router.push(/login)}// 页面初始化读取用户constuseruserStore.get()/script示例 2保存页面筛选条件刷新页面不丢失script setupimport{useStorage}from/utils/storage// 默认筛选条件constfilterStoreuseStorage(portalFilter,{name:,type:all})// 页面加载读取筛选条件回填表单constfilterParamsfilterStore.get()// 查询时保存筛选条件constsearch(){filterStore.set(filterParams)// 请求接口...}// 重置清空存储constreset(){filterStore.remove()}/script注意事项 踩坑点每次调用 useStorage(key) 会生成全新实例不要重复创建实例操作同一个 key建议提前定义变量复用// 不推荐重复实例useStorage(token).set(xxx)useStorage(token).get()// 推荐复用实例consttokenStoreuseStorage(token)tokenStore.set(xxx)tokenStore.get()localStorage 同步阻塞大量数据读写不建议频繁调用存储大数据超出容量会触发 set 内 catch 警告不会报错崩溃默认值仅在读取失败 / 无数据时生效不会自动写入本地仅存储到当前域名无痕模式关闭浏览器数据会清空不支持响应式get() 获取的值是静态副本本地存储变更不会自动更新页面变量如果需要响应式可封装一层 ref如下script setupimport{ref}fromvueimport{useStorage}from/utils/storageconstuserStoreuseStorage(user,null)constuserref(userStore.get())constupdateUser(newVal){userStore.set(newVal)user.valuenewVal// 手动更新响应式变量}/script