在 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 统一管理，读写逻辑也统一封装，后期维护更加轻松。
七、总结
通过本文的讲解，我们实现了：
- 将本地存储的 key 值统一管理为常量；
- 在
App.vue和页面中统一使用常量，避免硬编码； - 提高了代码的可读性、可维护性和可扩展性；
- 可选地封装了本地存储工具类，实现更优雅的代码结构。
在实际项目中，这种“常量集中管理 + 工具封装”的方式，能显著提升开发效率，降低维护成本。
📌 小贴士：
- 常量命名建议使用大写加下划线格式（如
GM_STATUS_BAR_HEIGHT）； - key 建议加上项目前缀（如
GM_），避免与第三方插件冲突； - 所有常量建议统一放在
constant或constants目录中； - 可进一步结合 TypeScript 接口或枚举，增强类型安全。
如果你觉得这篇文章对你有帮助，欢迎点赞、收藏或分享给需要的朋友！也欢迎关注我的技术博客，获取更多 UniApp 开发实战技巧。🚀