/** * 表单数据本地存储工具类 * 用于防止用户意外退出导致表单数据丢失 */ 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); * } * } * } */