【vue】表单数据缓存

方案：localStorage + beforeunload事件

因为我目前只缓存了表单的进度，以此为例。

1.组件的created或mounted钩子中加入beforeunload事件

window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));

 

2.beforeunload事件的销毁

//beforeDestroy和destroy钩子中都可做此种操作
beforeDestroy(){
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e));
},

 

3.实现beforeunloadHandler方法具体逻辑

//该方法可在页面刷新前拿到表单数据
//拿到表单数据后，通过localStorage等缓存存放

beforeunloadHandler(e){
     //this.$storage：封装localStorage或sessionStorage等逻辑
    //存储
    this.$storage.set(ENTERPRISE_STEP,this.step);
}

 

4.清除缓存表单数据的时机

• 点击菜单时 menuClick
• 本表单数据页面的返回方法中
• 登出时