当前位置：首页 > news >正文

UniApp 优化实践：使用常量统一管理本地存储 Key，提升可维护性

news 2025/7/21 15:03:02

在 UniApp 项目开发中，随着功能的增加，本地存储（如 uni.setStorageSync）的使用频率也会增加。如果直接在代码中硬编码 key 值，不仅容易出错，也难以后期维护。

本文将以“自定义导航栏适配状态栏高度”为例，带你实现一个更优雅、更易维护的本地存储 key 管理方式 —— 使用常量统一管理 key 值，提升代码的可读性和可维护性。

一、问题：硬编码 key 值的弊端

在之前的代码中，我们是这样存储状态栏高度的：

uni.setStorageSync('GM_STATUS_BAR_HEIGHT', result.statusBarHeight)

这种方式虽然可以实现功能，但存在以下问题：

拼写错误风险高：比如写成 'GM_STATUS_BAR_HEIGHTD'，难以发现；
不易维护：如果后续要修改 key 名，需要全局搜索替换；
缺乏统一管理：多个 key 分散在不同文件中，维护成本高。

二、解决方案：使用常量集中管理 key

我们可以创建一个常量文件，集中管理所有本地存储的 key，例如：

✅ 创建常量文件：`constant/index.uts`

export const GM_STATUS_BAR_HEIGHT = 'GM_STATUS_BAR_HEIGHT'

推荐使用 constant 或 storageKeys 等命名方式作为目录名，统一管理所有本地存储的 key。

三、修改 App.vue：使用常量进行存储

在 App.vue 的 onLaunch 生命周期中，我们引入常量并使用它进行本地存储：

import { GM_STATUS_BAR_HEIGHT } from '@/constant/index.uts'export default {onLaunch() {uni.getSystemInfo({success: (result) => {uni.setStorageSync(GM_STATUS_BAR_HEIGHT, result.statusBarHeight)}})}
}

✅ 这样做的好处是：

key 值统一管理，避免重复或拼写错误；
后期维护只需修改常量文件，无需逐个查找代码；
提升代码可读性，其他开发者更容易理解。

四、页面中使用常量读取 key

在需要读取状态栏高度的页面中，同样引入常量并使用它读取本地存储：

import { GM_STATUS_BAR_HEIGHT } from '@/constant/index.uts'export default {data() {return {statusHeight: 0}},onLoad() {uni.getStorage({key: GM_STATUS_BAR_HEIGHT,success: (res) => {this.statusHeight = res.data}})}
}

这样，页面和 App.vue 使用的是同一个 key 常量，确保数据一致性。

五、进阶建议：扩展常量管理更多 key

随着项目功能的增加，你可能会用到更多本地存储的 key，例如：

export const GM_STATUS_BAR_HEIGHT = 'GM_STATUS_BAR_HEIGHT'
export const GM_USER_TOKEN = 'GM_USER_TOKEN'
export const GM_USER_INFO = 'GM_USER_INFO'
export const GM_APP_VERSION = 'GM_APP_VERSION'

这样你就可以在项目中统一使用这些常量，避免 key 的重复和混乱。

六、额外优化：封装本地存储工具类（可选）

为了进一步提升可维护性，你还可以封装一个本地存储工具类，统一处理读写逻辑：

✅ 示例：`utils/storage.uts`

import { GM_STATUS_BAR_HEIGHT } from '@/constant/index.uts'const get = (key: string): any => {const res = uni.getStorageSync(key)return res
}const set = (key: string, value: any): void => {uni.setStorageSync(key, value)
}export default {get,set,GM_STATUS_BAR_HEIGHT
}

然后在页面中使用：

import storage from '@/utils/storage.uts'export default {onLoad() {const height = storage.get(storage.GM_STATUS_BAR_HEIGHT)this.statusHeight = height}
}

这样，不仅 key 统一管理，读写逻辑也统一封装，后期维护更加轻松。