【vue】表单数据缓存

最新推荐文章于 2025-07-26 12:24:56 发布

原创最新推荐文章于 2025-07-26 12:24:56 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#表单数据缓存 #vue

vue工作专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue组件中利用beforeunload事件监听窗口卸载，结合localStorage来缓存表单数据。在组件创建或挂载时绑定beforeunload事件，页面刷新前保存表单进度到localStorage。在beforeDestroy阶段移除事件监听，确保内存释放。同时，指出了清除缓存的时机，如菜单切换、页面返回和用户登出。该方案有助于提升用户体验，防止数据丢失。

方案：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.清除缓存表单数据的时机