You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
4.8 KiB
196 lines
4.8 KiB
/**
|
|
* 表单数据本地存储工具类
|
|
* 用于防止用户意外退出导致表单数据丢失
|
|
*/
|
|
|
|
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);
|
|
* }
|
|
* }
|
|
* }
|
|
*/
|