javascript - How to handle / prevent browser navigation or reload in angularjs?

Question

I would like to detect in my angular app when a user is navigating away from or reloading a page.

App (that uses some login process) should then distinguish that it was re-loaded, so user won't lose his auth data and app should be able to restore then necessary information from localStorage.

Please suggest some best techniques to "handle" browser reloading / navigation.

Answer 1

All of your javascript and in memory variables disappear on reload. In js, you know the page was reloaded when the code is running again for the first time.

To handle the reload itself (which includes hitting F5) and to take action before it reloads or even cancel, use 'beforeunload' event.

var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
    // do whatever you want in here before the page unloads.        

    // the following line of code will prevent reload or navigating away.
    event.preventDefault();
});