企业官网建设流程全解析

一、本地存储（Storage）

1. 存入数据

// 异步方法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)}})// 同步方法consttoken=uni.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_KEY='APP_TOKEN'exportconstsetToken=(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}from'vue'import*asPiniafrom'pinia'importpiniaPluginPersistedstatefrom'pinia-plugin-persistedstate'exportfunctioncreateApp(){constapp=createSSRApp(App)constpinia=Pinia.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}from'pinia'import{piniaPersistConfig}from'@/utils/persist'// 引入封装好的配置exportconstuseUserStore=defineStore('user',{state:()=>({token:''}),// 一行代码搞定持久化！persist:piniaPersistConfig('user-store')})

四、Storage避坑指南

容量限制：微信小程序的本地存储不是无限的。单个 key 最大只能存 1MB 的数据，所有数据加起来不能超过 10MB。所以，千万不要用它来存高清图片或超长的视频，它只适合存文本、JSON 对象等小数据。

命名规范：给 key 起名字时，千万不要以uni-、uni_、dcloud-、dcloud_开头。这些是系统保留的“VIP前缀”，如果你用了，可能会导致程序报错或数据丢失。

数据格式：存储的内容只支持原生类型（如字符串、数字、布尔值）以及能被JSON.stringify转换的对象。如果你直接传一个复杂的自定义类对象，可能会报错。