在 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 開發實戰技巧。🚀