在校园心理普查项目中，长篇量表（如 MMPI 或 16PF）的测试过程往往耗时较长。在此期间，如果因为网络不稳定、误触浏览器“返回”键或标签页崩溃等原因导致答卷意外丢失，不仅会增加受测者的操作负担，也会影响心理建档的进度。
为了保证答题数据的完整性，现代 B 端心理 SaaS 需要在前端构建一套可靠的离线缓存机制。
内存存储的局限性
部分开发者习惯将当前选中的答案保存在 Vuex、Redux 或组件自身的状态中。
这种做法存在隐患，因为这些状态仅存在于浏览器的运行内存中。一旦发生页面刷新，或者移动端浏览器在后台清理了进程，内存中的数据就会丢失，无法恢复。
本地存储与高频防抖写入
要抵抗页面刷新导致的内存清空，需要将答题状态写入浏览器的持久化缓存中，LocalStorage 是最直接的方案。
在实际操作中，每次受测者选中一个选项，前端都应触发一次保存操作。但为避免连续快速点击引发频繁的磁盘写入从而导致页面卡顿，引入防抖（Debounce）机制非常关键。
“`javascript
import { debounce } from ‘lodash’;
// 将答案同步到本地缓存，设定 500 毫秒的延迟以合并频繁操作
const saveToDisk = debounce((answers) => {
try {
localStorage.setItem(draftexam${studentId}, JSON.stringify(answers));
} catch (e) {
// 处理异常情况，例如无痕模式下 localStorage 被禁用
console.warn(‘本地缓存写入失败’, e);
}
}, 500);
function onAnswerSelected(questionId, option) {
// 1. 更新内存状态
memoryAnswers[questionId] = option;
// 2. 触发防抖的本地写入
saveToDisk(memoryAnswers);
}
“`
通过这种机制，即使设备意外断电重启，只要重新打开对应页面，初始化逻辑就可以从 localStorage 中读取此前保存的答案，恢复答题现场。
应对复杂数据的 IndexedDB 方案
LocalStorage 在使用上十分简便，但它有两个明显的限制：
- 容量限制：通常最多只能存储 5MB 左右的数据。
- 同步阻塞：它是同步执行的 API，如果写入包含复杂数据结构的较大快照，可能会阻塞 JS 主线程，影响页面响应速度。
随着心理系统功能的扩展，例如需要缓存沙盘作答过程中的图片数据，或离线语音评测的音频流时，LocalStorage 的容量就显得捉襟见肘。
在这种复杂场景下，前端架构需要引入浏览器原生的微型数据库：IndexedDB。正如橙星云研发团队在处理多媒体离线缓存时的实践，通过借助 localforage 这类封装库，前端可以方便地将几十 MB 的多媒体答题快照以异步非阻塞的方式存入 IndexedDB。
“`javascript
import localforage from ‘localforage’;
// 异步写入数据，避免阻塞主线程
localforage.setItem(superdraft${studentId}, massiveAnswerData)
.then(() => console.log(‘多媒体离线缓存就绪’))
.catch(err => console.error(‘本地数据库写入异常’, err));
“`
在严谨的心理测评场景中，保障数据不丢失是系统的基础要求。通过摒弃单纯依赖运行内存的做法，合理结合防抖的 LocalStorage 应对文本类选项，并利用异步的 IndexedDB 处理海量复杂数据，前端工程师能够建立起一套应对断网断电、刷新页面的数据保护机制，确保每一份测评数据的安全。