租房小程序前端代码

3.8 KiB

Raw Blame History

表单数据本地存储工具使用说明

概述

formStorage.js 是一个专门用于防止用户意外退出导致表单数据丢失的工具类。它会自动保存用户填写的表单数据到本地存储，并在用户重新进入页面时恢复数据。

功能特性

✅ 自动保存: 用户输入时自动保存表单数据
✅ 数据恢复: 页面重新加载时自动恢复之前填写的数据
✅ 防抖机制: 避免频繁保存操作，提升性能
✅ 数据过期: 支持设置数据过期时间（默认7天）
✅ 提交清理: 表单提交成功后自动清除本地数据
✅ 多表单支持: 支持多个表单页面独立存储

已集成页面

目前已为以下三个表单页面集成了数据存储功能：

经营性建设用地录入 (commercial.vue) - formKey: commercial_form
闲置农房信息录入 (farmhouse.vue) - formKey: farmhouse_form
其他农村资源录入 (other.vue) - formKey: other_form

工作流程

1. 页面加载时

自动检查是否有保存的表单数据
如果有数据且未过期，则恢复到表单中
显示提示信息告知用户数据已恢复

2. 用户操作时

监听所有表单输入事件（input、change等）
使用防抖机制（1秒延迟）自动保存数据
包括文本输入、选择器、文件上传等所有操作

3. 页面卸载时

保存当前表单状态
清理防抖定时器

4. 表单提交成功后

自动清除本地存储的表单数据
避免下次进入时恢复已提交的数据

监听的操作类型

基础输入

文本输入框 (@input)
数字输入框 (@input)
文本域 (@input)
单选按钮组 (@change)
复选框 (@change)

选择器操作

地址选择
分类选择
房屋状况选择

文件操作

图片上传完成
视频上传完成
文件删除

特殊操作

标签选择（房屋亮点、不利因素）
协议勾选状态变化

数据存储格式

{
  data: {}, // 表单数据对象
  timestamp: 1234567890 // 保存时间戳
}

存储键名规则

前缀: form_data_
完整键名: form_data_{formKey}
示例: form_data_commercial_form

用户体验

数据恢复提示

当检测到有保存的数据时，会显示Toast提示：

已恢复上次填写的数据

自动保存

用户无需手动保存
所有操作都会触发自动保存
使用防抖机制避免频繁操作

数据清理

表单提交成功后自动清理
数据过期后自动清理（7天）
支持手动清理所有表单数据

技术实现

防抖机制

debounceSaveFormData() {
  clearTimeout(this.saveTimer)
  this.saveTimer = setTimeout(() => {
    this.saveFormData()
  }, 1000)
}

数据恢复

restoreFormData() {
  const savedData = formStorage.getFormData(this.formKey)
  if (savedData) {
    this.form = { ...this.form, ...savedData }
    // 显示恢复提示
  }
}

生命周期集成

onLoad: 恢复数据
onUnload: 保存数据
提交成功: 清除数据

注意事项

数据安全: 敏感信息不会被保存（如密码等）
存储限制: 受浏览器本地存储容量限制
数据同步: 仅在本地设备有效，不跨设备同步
过期清理: 超过7天的数据会自动清理
性能优化: 使用防抖机制避免频繁保存

扩展使用

如需为其他表单页面添加此功能，请参考已集成页面的实现方式：

导入工具类
设置唯一的 formKey
在生命周期中调用相应方法
为表单控件添加事件监听
在提交成功后清理数据

这样可以确保用户在填写表单时不会因为意外退出而丢失数据，大大提升用户体验。

3.8 KiB Raw Blame History