Do something before reload or close in vue.js

Question

I have a Vue.JS application with a beforeDestroy method that I'm trying to use to store some data in local storage before the app closes or is reloaded.

Just for reference:

beforeDestroy: function() {
  localStorage.setItem('preference', this.preference);
  ...
}

However, neither closing nor reloading the app actually calls this method.

How can I make sure this method is called before the app is closed?

Answer 1

What is it that "closes" or "reloads" the app? Is it the user in the browser closing the window and/or refreshing the page?

If that is the case, nothing is "destroyed" and that function won't run.

You would have to define a onbeforeunload function globally:

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

Then you can save items to local storage inside that function before the return statement.

Note: don't define it inside your beforeDestroy function, because again, that just won't run when you reload the page or navigate away.