在vue.js中重新加载或关闭之前执行一些操作

Ben*_*Ben 5 javascript vue.js

我有一个Vue.JS应用程序,该beforeDestroy方法试图在关闭或重新加载应用程序之前将一些数据存储在本地存储中。仅供参考:

beforeDestroy: function() {
  localStorage.setItem('preference', this.preference);
  ...
}
Run Code Online (Sandbox Code Playgroud)

但是,关闭或重新加载应用程序实际上都不会调用此方法。如何确保在关闭应用程序之前调用此方法?

Sol*_*gon 8

“关闭”或“重新加载”应用程序是什么?浏览器中的用户是关闭窗口还是刷新页面?如果是这种情况,则不会“破坏”任何内容,并且该功能将无法运行。您将必须onbeforeunload全局定义一个函数:

window.onbeforeunload = function(){
    return "Are you sure you want to close the window?";
}
Run Code Online (Sandbox Code Playgroud)

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload

那么您可以在return语句之前将项目保存到该函数内部的本地存储中。

提示:不要在beforeDestroy函数中定义它,因为同样,当您重新加载页面或导航离开时,它不会运行。