防止长表单数据丢失方案，缓存表单填写内容，放置卡退或误操作返回。
一、存储方案（多端兼容）
1. 使用 UniApp 的数据存储 API
javascript
复制代码
// utils/storage.js
export class FormDraftManager {
constructor(formKey = 'formDraft') {
this.formKey = formKey;
}
// 保存草稿
saveDraft(formData) {
const draft = {
data: formData,
timestamp: Date.now(),
formVersion: '1.0'
};
try {
uni.setStorageSync(this.formKey, draft);
return true;
} catch (e) {
console.error('保存草稿失败:', e);
return false;
}
}
// 获取草稿
getDraft() {
try {
return uni.getStorageSync(this.formKey);
} catch (e) {
console.error('读取草稿失败:', e);
return null;
}
}
// 清除草稿
clearDraft() {
try {
uni.removeStorageSync(this.formKey);
return true;
} catch (e) {
console.error('清除草稿失败:', e);
return false;
}
}
// 检查草稿是否有效（例如24小时内）
isDraftValid(draft, maxAge = 24 * 60 * 60 * 1000) {
if (!draft || !draft.timestamp) return false;
return (Date.now() - draft.timestamp) < maxAge;
}
}
二、恢复确认弹窗实现
1. 使用 UniApp 的模态框 API
javascript
复制代码
// pages/your-form-page.vue
<script>
import { FormDraftManager } from '@/utils/storage.js';
export default {
data() {
return {
formData: {
name: '',
email: '',
phone: '',
// ...其他表单字段
},
draftManager: new FormDraftManager(),
hasRecovered: false
}
},
onLoad() {
this.checkAndRecoverDraft();
},
onUnload() {
// 页面卸载时自动保存（可选）
this.autoSaveDraft();
},
methods: {
// 检查并恢复草稿
async checkAndRecoverDraft() {
const draft = this.draftManager.getDraft();
if (this.draftManager.isDraftValid(draft)) {
// 显示恢复确认弹窗
this.showRecoveryConfirm(draft);
}
},
// 显示恢复确认弹窗
showRecoveryConfirm(draft) {
const formattedTime = this.formatTime(draft.timestamp);
uni.showModal({
title: '恢复填写进度？',
content: `检测到您上次在 ${formattedTime} 有未提交的表单内容，是否恢复？`,
confirmText: '恢复数据',
cancelText: '重新开始',
confirmColor: '#007AFF',
success: (res) => {
if (res.confirm) {
this.restoreFormData(draft.data);
} else {
this.clearDraft();
}
}
});
},
// 恢复表单数据
restoreFormData(draftData) {
this.formData = { ...this.formData, ...draftData };
this.hasRecovered = true;
// 显示成功提示
uni.showToast({
title: '数据恢复成功',
icon: 'success',
duration: 2000
});
},
// 自动保存草稿
autoSaveDraft() {
// 检查表单是否有内容
if (this.hasFormData()) {
this.draftManager.saveDraft(this.formData);
}
},
// 检查表单是否有数据
hasFormData() {
return Object.values(this.formData).some(value =>
value !== '' && value !== null && value !== undefined
);
},
// 清除草稿
clearDraft() {
this.draftManager.clearDraft();
},
// 格式化时间
formatTime(timestamp) {
const date = new Date(timestamp);
return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
},
// 表单提交
async submitForm() {
try {
// 你的提交逻辑
// await submitApi(this.formData);
// 提交成功后清除草稿
this.clearDraft();
uni.showToast({
title: '提交成功',
icon: 'success'
});
} catch (error) {
uni.showToast({
title: '提交失败',
icon: 'error'
});
}
},
// 手动保存草稿（可提供给用户操作）
manualSaveDraft() {
if (this.draftManager.saveDraft(this.formData)) {
uni.showToast({
title: '草稿已保存',
icon: 'success'
});
}
}
}
}
</script>
三、实时自动保存（增强体验）
1. 防抖自动保存
javascript
复制代码
// 在 data 中添加
data() {
return {
// ...其他数据
autoSaveTimer: null
}
},
// 在 methods 中添加
methods: {
// 输入时触发自动保存（防抖）
onInput(field, value) {
this.formData[field] = value;
this.debouncedAutoSave();
},
// 防抖自动保存
debouncedAutoSave() {
if (this.autoSaveTimer) {
clearTimeout(this.autoSaveTimer);
}
this.autoSaveTimer = setTimeout(() => {
this.autoSaveDraft();
}, 2000); // 2秒后自动保存
},
// 显示保存状态
showSaveStatus() {
// 可以在模板中显示保存状态
this.saveStatus = '保存中...';
setTimeout(() => {
this.saveStatus = '已保存';
setTimeout(() => {
this.saveStatus = '';
}, 2000);
}, 500);
}
}
四、模板部分
javascript
复制代码
<template>
<view class="form-container">
<!-- 保存状态提示 -->
<view v-if="saveStatus" class="save-status">
{{ saveStatus }}
</view>
<form @submit="submitForm">
<view class="form-item">
<text class="label">姓名</text>
<input
class="input"
v-model="formData.name"
@input="onInput('name', $event.detail.value)"
placeholder="请输入姓名"
/>
</view>
<view class="form-item">
<text class="label">邮箱</text>
<input
class="input"
v-model="formData.email"
@input="onInput('email', $event.detail.value)"
placeholder="请输入邮箱"
type="email"
/>
</view>
<view class="form-item">
<text class="label">电话</text>
<input
class="input"
v-model="formData.phone"
@input="onInput('phone', $event.detail.value)"
placeholder="请输入电话"
type="number"
/>
</view>
<!-- 更多表单项... -->
<view class="form-actions">
<button class="btn-save-draft" @click="manualSaveDraft" type="button">
保存草稿
</button>
<button class="btn-submit" form-type="submit">
提交表单
</button>
</view>
</form>
</view>
</template>
<style scoped>
.form-container {
padding: 30rpx;
}
.save-status {
text-align: center;
color: #07c160;
font-size: 24rpx;
margin-bottom: 20rpx;
}
.form-item {
margin-bottom: 40rpx;
}
.label {
display: block;
margin-bottom: 10rpx;
font-weight: bold;
}
.input {
border: 1px solid #ddd;
border-radius: 8rpx;
padding: 20rpx;
font-size: 28rpx;
}
.form-actions {
display: flex;
gap: 20rpx;
margin-top: 60rpx;
}
.btn-save-draft {
flex: 1;
background: #f8f9fa;
color: #333;
}
.btn-submit {
flex: 2;
background: #007AFF;
color: white;
}
</style>