5 changed files with 552 additions and 50 deletions
Unified View
Diff Options
-
+57 -9pages_subpack/house/commercial.vue
-
+82 -22pages_subpack/house/farmhouse.vue
-
+71 -19pages_subpack/house/other.vue
-
+146 -0utils/README_formStorage.md
-
+196 -0utils/formStorage.js
+ 57
- 9
pages_subpack/house/commercial.vue
View File
+ 82
- 22
pages_subpack/house/farmhouse.vue
View File
+ 71
- 19
pages_subpack/house/other.vue
View File
+ 146
- 0
utils/README_formStorage.md
View File
| @ -0,0 +1,146 @@ | |||||
| # 表单数据本地存储工具使用说明 | |||||
| ## 概述 | |||||
| `formStorage.js` 是一个专门用于防止用户意外退出导致表单数据丢失的工具类。它会自动保存用户填写的表单数据到本地存储，并在用户重新进入页面时恢复数据。 | |||||
| ## 功能特性 | |||||
| - ✅ **自动保存**: 用户输入时自动保存表单数据 | |||||
| - ✅ **数据恢复**: 页面重新加载时自动恢复之前填写的数据 | |||||
| - ✅ **防抖机制**: 避免频繁保存操作，提升性能 | |||||
| - ✅ **数据过期**: 支持设置数据过期时间（默认7天） | |||||
| - ✅ **提交清理**: 表单提交成功后自动清除本地数据 | |||||
| - ✅ **多表单支持**: 支持多个表单页面独立存储 | |||||
| ## 已集成页面 | |||||
| 目前已为以下三个表单页面集成了数据存储功能： | |||||
| 1. **经营性建设用地录入** (`commercial.vue`) - formKey: `commercial_form` | |||||
| 2. **闲置农房信息录入** (`farmhouse.vue`) - formKey: `farmhouse_form` | |||||
| 3. **其他农村资源录入** (`other.vue`) - formKey: `other_form` | |||||
| ## 工作流程 | |||||
| ### 1. 页面加载时 | |||||
| - 自动检查是否有保存的表单数据 | |||||
| - 如果有数据且未过期，则恢复到表单中 | |||||
| - 显示提示信息告知用户数据已恢复 | |||||
| ### 2. 用户操作时 | |||||
| - 监听所有表单输入事件（input、change等） | |||||
| - 使用防抖机制（1秒延迟）自动保存数据 | |||||
| - 包括文本输入、选择器、文件上传等所有操作 | |||||
| ### 3. 页面卸载时 | |||||
| - 保存当前表单状态 | |||||
| - 清理防抖定时器 | |||||
| ### 4. 表单提交成功后 | |||||
| - 自动清除本地存储的表单数据 | |||||
| - 避免下次进入时恢复已提交的数据 | |||||
| ## 监听的操作类型 | |||||
| ### 基础输入 | |||||
| - 文本输入框 (`@input`) | |||||
| - 数字输入框 (`@input`) | |||||
| - 文本域 (`@input`) | |||||
| - 单选按钮组 (`@change`) | |||||
| - 复选框 (`@change`) | |||||
| ### 选择器操作 | |||||
| - 地址选择 | |||||
| - 分类选择 | |||||
| - 房屋状况选择 | |||||
| ### 文件操作 | |||||
| - 图片上传完成 | |||||
| - 视频上传完成 | |||||
| - 文件删除 | |||||
| ### 特殊操作 | |||||
| - 标签选择（房屋亮点、不利因素） | |||||
| - 协议勾选状态变化 | |||||
| ## 数据存储格式 | |||||
| ```javascript | |||||
| { | |||||
| data: {}, // 表单数据对象 | |||||
| timestamp: 1234567890 // 保存时间戳 | |||||
| } | |||||
| ``` | |||||
| ## 存储键名规则 | |||||
| - 前缀: `form_data_` | |||||
| - 完整键名: `form_data_{formKey}` | |||||
| - 示例: `form_data_commercial_form` | |||||
| ## 用户体验 | |||||
| ### 数据恢复提示 | |||||
| 当检测到有保存的数据时，会显示Toast提示： | |||||
| ``` | |||||
| 已恢复上次填写的数据 | |||||
| ``` | |||||
| ### 自动保存 | |||||
| - 用户无需手动保存 | |||||
| - 所有操作都会触发自动保存 | |||||
| - 使用防抖机制避免频繁操作 | |||||
| ### 数据清理 | |||||
| - 表单提交成功后自动清理 | |||||
| - 数据过期后自动清理（7天） | |||||
| - 支持手动清理所有表单数据 | |||||
| ## 技术实现 | |||||
| ### 防抖机制 | |||||
| ```javascript | |||||
| debounceSaveFormData() { | |||||
| clearTimeout(this.saveTimer) | |||||
| this.saveTimer = setTimeout(() => { | |||||
| this.saveFormData() | |||||
| }, 1000) | |||||
| } | |||||
| ``` | |||||
| ### 数据恢复 | |||||
| ```javascript | |||||
| restoreFormData() { | |||||
| const savedData = formStorage.getFormData(this.formKey) | |||||
| if (savedData) { | |||||
| this.form = { ...this.form, ...savedData } | |||||
| // 显示恢复提示 | |||||
| } | |||||
| } | |||||
| ``` | |||||
| ### 生命周期集成 | |||||
| - `onLoad`: 恢复数据 | |||||
| - `onUnload`: 保存数据 | |||||
| - 提交成功: 清除数据 | |||||
| ## 注意事项 | |||||
| 1. **数据安全**: 敏感信息不会被保存（如密码等） | |||||
| 2. **存储限制**: 受浏览器本地存储容量限制 | |||||
| 3. **数据同步**: 仅在本地设备有效，不跨设备同步 | |||||
| 4. **过期清理**: 超过7天的数据会自动清理 | |||||
| 5. **性能优化**: 使用防抖机制避免频繁保存 | |||||
| ## 扩展使用 | |||||
| 如需为其他表单页面添加此功能，请参考已集成页面的实现方式： | |||||
| 1. 导入工具类 | |||||
| 2. 设置唯一的 `formKey` | |||||
| 3. 在生命周期中调用相应方法 | |||||
| 4. 为表单控件添加事件监听 | |||||
| 5. 在提交成功后清理数据 | |||||
| 这样可以确保用户在填写表单时不会因为意外退出而丢失数据，大大提升用户体验。 | |||||
+ 196
- 0
utils/formStorage.js
View File
| @ -0,0 +1,196 @@ | |||||
| /** | |||||
| * 表单数据本地存储工具类 | |||||
| * 用于防止用户意外退出导致表单数据丢失 | |||||
| */ | |||||
| class FormStorage { | |||||
| constructor() { | |||||
| this.prefix = 'form_data_'; | |||||
| } | |||||
| /** | |||||
| * 保存表单数据到本地存储 | |||||
| * @param {string} formKey - 表单唯一标识 | |||||
| * @param {object} formData - 表单数据 | |||||
| */ | |||||
| saveFormData(formKey, formData) { | |||||
| try { | |||||
| const key = this.prefix + formKey; | |||||
| const dataToSave = { | |||||
| data: formData, | |||||
| timestamp: Date.now() | |||||
| }; | |||||
| uni.setStorageSync(key, JSON.stringify(dataToSave)); | |||||
| console.log(`表单数据已保存: ${formKey}`); | |||||
| } catch (error) { | |||||
| console.error('保存表单数据失败:', error); | |||||
| } | |||||
| } | |||||
| /** | |||||
| * 从本地存储恢复表单数据 | |||||
| * @param {string} formKey - 表单唯一标识 | |||||
| * @param {number} expireTime - 过期时间(毫秒)，默认7天 | |||||
| * @returns {object|null} 表单数据或null | |||||
| */ | |||||
| getFormData(formKey, expireTime = 7 * 24 * 60 * 60 * 1000) { | |||||
| try { | |||||
| const key = this.prefix + formKey; | |||||
| const savedData = uni.getStorageSync(key); | |||||
| if (!savedData) { | |||||
| return null; | |||||
| } | |||||
| const parsedData = JSON.parse(savedData); | |||||
| const now = Date.now(); | |||||
| // 检查数据是否过期 | |||||
| if (now - parsedData.timestamp > expireTime) { | |||||
| this.removeFormData(formKey); | |||||
| console.log(`表单数据已过期并清除: ${formKey}`); | |||||
| return null; | |||||
| } | |||||
| console.log(`表单数据已恢复: ${formKey}`); | |||||
| return parsedData.data; | |||||
| } catch (error) { | |||||
| console.error('恢复表单数据失败:', error); | |||||
| return null; | |||||
| } | |||||
| } | |||||
| /** | |||||
| * 删除指定表单的本地存储数据 | |||||
| * @param {string} formKey - 表单唯一标识 | |||||
| */ | |||||
| removeFormData(formKey) { | |||||
| try { | |||||
| const key = this.prefix + formKey; | |||||
| uni.removeStorageSync(key); | |||||
| console.log(`表单数据已清除: ${formKey}`); | |||||
| } catch (error) { | |||||
| console.error('清除表单数据失败:', error); | |||||
| } | |||||
| } | |||||
| /** | |||||
| * 清除所有表单数据 | |||||
| */ | |||||
| clearAllFormData() { | |||||
| try { | |||||
| const storageInfo = uni.getStorageInfoSync(); | |||||
| const keysToRemove = storageInfo.keys.filter(key => key.startsWith(this.prefix)); | |||||
| keysToRemove.forEach(key => { | |||||
| uni.removeStorageSync(key); | |||||
| }); | |||||
| console.log(`已清除所有表单数据，共${keysToRemove.length}条`); | |||||
| } catch (error) { | |||||
| console.error('清除所有表单数据失败:', error); | |||||
| } | |||||
| } | |||||
| /** | |||||
| * 检查是否存在指定表单的数据 | |||||
| * @param {string} formKey - 表单唯一标识 | |||||
| * @returns {boolean} | |||||
| */ | |||||
| hasFormData(formKey) { | |||||
| try { | |||||
| const key = this.prefix + formKey; | |||||
| const savedData = uni.getStorageSync(key); | |||||
| return !!savedData; | |||||
| } catch (error) { | |||||
| console.error('检查表单数据失败:', error); | |||||
| return false; | |||||
| } | |||||
| } | |||||
| /** | |||||
| * 获取所有已保存的表单列表 | |||||
| * @returns {Array} 表单key列表 | |||||
| */ | |||||
| getAllFormKeys() { | |||||
| try { | |||||
| const storageInfo = uni.getStorageInfoSync(); | |||||
| return storageInfo.keys | |||||
| .filter(key => key.startsWith(this.prefix)) | |||||
| .map(key => key.replace(this.prefix, '')); | |||||
| } catch (error) { | |||||
| console.error('获取表单列表失败:', error); | |||||
| return []; | |||||
| } | |||||
| } | |||||
| } | |||||
| // 创建单例实例 | |||||
| const formStorage = new FormStorage(); | |||||
| // 导出实例和类 | |||||
| export default formStorage; | |||||
| export { FormStorage }; | |||||
| /** | |||||
| * 使用示例： | |||||
| * | |||||
| * // 在表单页面中使用 | |||||
| * import formStorage from '@/utils/formStorage.js'; | |||||
| * | |||||
| * export default { | |||||
| * data() { | |||||
| * return { | |||||
| * form: { | |||||
| * name: '', | |||||
| * phone: '', | |||||
| * // ... 其他字段 | |||||
| * }, | |||||
| * formKey: 'commercial_form' // 每个表单页面使用不同的key | |||||
| * } | |||||
| * }, | |||||
| * | |||||
| * onLoad() { | |||||
| * // 页面加载时恢复数据 | |||||
| * this.restoreFormData(); | |||||
| * }, | |||||
| * | |||||
| * onUnload() { | |||||
| * // 页面卸载时保存数据 | |||||
| * this.saveFormData(); | |||||
| * }, | |||||
| * | |||||
| * methods: { | |||||
| * // 恢复表单数据 | |||||
| * restoreFormData() { | |||||
| * const savedData = formStorage.getFormData(this.formKey); | |||||
| * if (savedData) { | |||||
| * this.form = { ...this.form, ...savedData }; | |||||
| * uni.showToast({ | |||||
| * title: '已恢复上次填写的数据', | |||||
| * icon: 'none' | |||||
| * }); | |||||
| * } | |||||
| * }, | |||||
| * | |||||
| * // 保存表单数据 | |||||
| * saveFormData() { | |||||
| * formStorage.saveFormData(this.formKey, this.form); | |||||
| * }, | |||||
| * | |||||
| * // 表单提交成功后清除数据 | |||||
| * onSubmitSuccess() { | |||||
| * formStorage.removeFormData(this.formKey); | |||||
| * }, | |||||
| * | |||||
| * // 监听表单变化自动保存（可选） | |||||
| * onFormChange() { | |||||
| * // 防抖保存，避免频繁操作 | |||||
| * clearTimeout(this.saveTimer); | |||||
| * this.saveTimer = setTimeout(() => { | |||||
| * this.saveFormData(); | |||||
| * }, 1000); | |||||
| * } | |||||
| * } | |||||
| * } | |||||
| */ | |||||