使用场景：用户在填写表单时可能会遇到各种意外情况，比如网页刷新、意外关闭浏览器、电脑手机息屏等，这将导致用户已填写的数据丢失
思路：为了实现表单的自动保存功能，我们需要将用户填写的数据保存到本地存储中。使用computed属性来监听表单数据的变化，并将数据保存到localStorage中。
操作步骤：1.在Vue组件中，我们可以使用computed属性来监听表单数据的变化，并将数据保存到localStorage中。我们通过computed属性formDataStr将表单数据转换成字符串，并通过watch监听该属性的变化。每当表单数据发生变化时，会自动将最新的数据保存到localStorage中。代码示例如下：
export default {
data() {
return {
formData: {
name: '',
age: '',
email: ''
}
}
},
computed: {
formDataStr() {
return JSON.stringify(this.formData);
}
},
watch: {
formDataStr: {
handler(newVal) {
localStorage.setItem('formData', newVal);
},
immediate: true
}
}
}
2.当用户再次访问表单页面时，我们需要从localStorage中恢复之前保存的数据。在Vue组件中，我们可以使用created生命周期钩子函数来实现数据恢复的功能。我们通过created生命周期钩子函数来判断localStorage中是否有之前保存的表单数据，如果有，则将其解析并赋值给formData，完成数据的恢复。
export default {
data() {
return {
formData: {
name: '',
age: '',
email: ''
}
}
},
created() {
const formDataStr = localStorage.getItem('formData');
if (formDataStr) {
this.formData = JSON.parse(formDataStr);
}
}
}
3.当用户成功提交表单数据后，我们需要清除localStorage中保存的数据，以便下次重新填写表单时能够从空白的状态开始。在Vue组件中，我们可以使用destroyed生命周期钩子函数来实现数据清除的功能。通过destroyed生命周期钩子函数来移除localStorage中保存的表单数据。这样，当用户成功提交表单后，下次重新访问表单页面时，表单将会重置为初始状态。
export default {
// ...
destroyed() {
localStorage.removeItem('formData');
}
// ...
}