houserent-front/utils/README_formStorage.md

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

## 概述

`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. 在提交成功后清理数据

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