houserent-front/utils/formStorage.js

/**
 * 表单数据本地存储工具类
 * 用于防止用户意外退出导致表单数据丢失
 */

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);
 *     }
 *   }
 * }
 */