vue页面如何通过js存储表单提交的数据localStorage

在Vue.js中，你可以使用JavaScript的`localStorage` API 来存储表单提交的数据。首先，你需要确保用户已经同意存储数据（通常不是必须的，但作为良好的实践），然后按照以下步骤操作：

1. **获取表单数据**:
在提交表单前，使用`this`关键字访问组件实例并获取表单数据，例如：

const formData = {
  key1: this.formValue1,
  key2: this.formValue2,
};

这里的`formValue1`和`formValue2`应该替换为你实际表单字段的变量名。

2. **存储数据**:
使用`localStorage.setItem`方法将数据保存到本地：

try {
  localStorage.setItem('formData', JSON.stringify(formData));
} catch (error) {
  console.error('Failed to store data in local storage:', error);
}

这里我们使用`JSON.stringify()`将对象转换成字符串形式再存储，因为`localStorage`只能存储字符串。

3. **读取数据**:
如果需要在其他地方或组件重新加载时获取数据，可以使用`localStorage.getItem`：

const storedData = localStorage.getItem('formData');
if (storedData) {
  const retrievedData = JSON.parse(storedData);
  // 这里你可以处理解析后的数据
}

记得在使用之前检查数据是否存在，并使用`JSON.parse()`将其转换回原始对象。