一、本地存储Storage1. 存入数据// 异步方法uni.setStorage({key:userToken,// 笔记本的标签data:abc-123-xyz,// 要记录的内容success:function(){console.log(Token 保存成功啦)}})// 同步方法uni.setStorageSync(userToken,abc-123-xyz)2. 读取数据// 异步方法uni.getStorage({key:userToken,success:function(res){console.log(读取到的 Token 是:,res.data)}})// 同步方法consttokenuni.getStorageSync(userToken)3. 删除数据// 异步方法uni.removeStorage({key:userToken,success:function(){console.log(Token 已删除成功退出登录)}})// 同步方法uni.removeStorageSync(userToken)4. 清空数据清除用户的所有本地缓存数据// 异步方法uni.clearStorage()// 同步方法uni.clearStorageSync()二、本地存储封装实际开发中我们不会在几十个页面里到处写uni.setStorageSync(token, ...)而是把它封装成一个专门的模块比如storage.js统一维护 key 与读写方法既方便管理也避免散落各处。// storage.jsconstTOKEN_KEYAPP_TOKENexportconstsetToken(token)uni.setStorageSync(TOKEN_KEY,token)exportconstgetToken()uni.getStorageSync(TOKEN_KEY)exportconstclearToken()uni.removeStorageSync(TOKEN_KEY)三、Pinia持久化在普通的 Vue 网页项目中Pinia 的持久化插件pinia-plugin-persistedstate默认是把数据存到浏览器的localStorage里的。但是微信小程序里根本没有localStorage这个对象如果直接配置persist: true小程序一运行就会报错。微信小程序中改写本地存储步骤如下第一步在 main.js 中注册插件import{createSSRApp}fromvueimport*asPiniafrompiniaimportpiniaPluginPersistedstatefrompinia-plugin-persistedstateexportfunctioncreateApp(){constappcreateSSRApp(App)constpiniaPinia.createPinia()// 1. 注册持久化插件pinia.use(piniaPluginPersistedstate)app.use(pinia)return{app}}第二步创建一个 persist.js 配置文件exportconstpiniaPersistConfig(key,paths){return{key,storage:{setItem(key,value){uni.setStorageSync(key,value)},getItem(key){returnuni.getStorageSync(key)}},paths// 如果只想持久化部分字段可以传这个数组}}第三步在 Store 中优雅地引用import{defineStore}frompiniaimport{piniaPersistConfig}from/utils/persist// 引入封装好的配置exportconstuseUserStoredefineStore(user,{state:()({token:}),// 一行代码搞定持久化persist:piniaPersistConfig(user-store)})四、Storage避坑指南容量限制微信小程序的本地存储不是无限的。单个 key 最大只能存 1MB 的数据所有数据加起来不能超过 10MB。所以千万不要用它来存高清图片或超长的视频它只适合存文本、JSON 对象等小数据。命名规范给 key 起名字时千万不要以uni-、uni_、dcloud-、dcloud_开头。这些是系统保留的“VIP前缀”如果你用了可能会导致程序报错或数据丢失。数据格式存储的内容只支持原生类型如字符串、数字、布尔值以及能被JSON.stringify转换的对象。如果你直接传一个复杂的自定义类对象可能会报错。