需求描述:
表单填写后,切换tab页再切回该页面时,表单内容依旧存在。
核心技术:
sessionStorage
beforeRouteLeave()
created()
解决方案:
beforeRouteLeave() 函数中将表单数据保存到sessionStorage中。
created() 函数中将保存在sessionStorage的数据重新赋值给表单。
代码展示:
-
存放表单
beforeRouteLeave(to, from, next) {
// 保存表单数据
sessionStorage.setItem("form_data", JSON.stringify(this.form));
sessionStorage.setItem("mxList_data", JSON.stringify(this.mxList));
next();
}
-
取出表单
created(){
// 从sessionStorage中恢复数据
const formDataString = sessionStorage.getItem("form_data");
const mxListDataString = sessionStorage.getItem("mxList_data");
if (formDataString) {
this.form = JSON.parse(formDataString);
}
if (mxListDataString) {
this.mxList = JSON.parse(mxListDataString);
}
}