通过动态注入APP_ENV环境变量生成存储前缀,实现多环境本地存储隔离:开发、测试、生产环境分别使用development:、test:、production:前缀,并配合自动清理非当前环境键值确保数据纯净。

用动态环境变量注入来区分不同环境下的本地存储命名空间,核心在于让代码运行时自动读取当前环境标识,再据此生成唯一、互不干扰的存储前缀。不需要硬编码,也不依赖构建时替换,真正实现“一套代码、多套隔离”。
明确环境标识变量
统一约定一个环境变量作为判断依据,比如 APP_ENV(值为 development、test 或 production)。这个变量应由启动命令、CI/CD流程或容器编排工具注入,而非写死在代码里。
- 开发环境:启动时设置
APP_ENV=development - 测试环境:CI流水线中注入
APP_ENV=test - 生产环境:K8s Deployment 或 Docker Compose 中声明
APP_ENV=production
构造带环境前缀的存储键名
在读写 localStorage / sessionStorage / IndexedDB 时,所有键名都拼接环境前缀。例如:
localStorage.setItem(`${envPrefix}:userToken`, token)`const data = JSON.parse(localStorage.getItem(`${envPrefix}:config`))`
其中 envPrefix 可通过 process.env.APP_ENV(Node.js/Vite)或 import.meta.env.APP_ENV(Vite)获取;浏览器扩展可用 chrome.runtime.getManifest().version_name 辅助判断,但推荐仍以注入的 APP_ENV 为准。
避免跨环境污染的关键细节
仅加前缀还不够,还需主动清理残留数据:
- 开发环境首次加载时,可扫描并清除不含
development:前缀的旧键(防止之前手动测试遗留) - 测试环境启动后,自动清空所有非
test:开头的键,确保测试数据纯净 - 生产环境禁止执行任何自动清理逻辑,只读写自身命名空间
适配不同技术栈的注入方式
环境变量注入要与项目类型匹配:
-
Vite 项目:在
.env.development中写VITE_APP_ENV=development,代码中用import.meta.env.VITE_APP_ENV -
Node.js + Express:启动命令设
APP_ENV=production node server.js,代码中用process.env.APP_ENV -
Docker Compose:在
environment:下添加- APP_ENV=${APP_ENV:-development},配合.env文件控制默认值 -
浏览器扩展:构建脚本根据
--mode=prod参数注入 manifest.json 中的content_scripts注入逻辑,或通过 background script 动态传参


















