Detecting page unload in angularjs

angularjs global-variables onbeforeunload persist rootscope
user1491636 picture user1491636 · Dec 8, 2014 · Viewed 13.9k times · Source

I have a javascript object which I need global to my angularjs application. When the application is about to be unloaded (due to a page refresh or some other scenario), I would like to persist the object to browser storage. I believe adding the object to $rootScope would fulfill the first requirement of making the object global, but writing the object to storage during the onbeforeunload event, would require access to the $rootScope variable. Is it possible to detect a page unload event in angularjs?

Answer

m59 picture m59 · Dec 8, 2014

This should do it, but I also suggest avoiding $rootScope as global state is discouraged, and you might also wrap localStorage in a service so that it can be injected and mocked for testing.

.run([
  '$window',
  '$rootScope',
  function($window, $rootScope) {
    $window.addEventListener('beforeunload', function() {
      localStorage.myValue = $rootScope.myValue;
    });
  }
]);

Related questions

Global variables in AngularJS

I have a problem where i'm initialising a variable on the scope in a controller. Then it gets changed in another controller when a user logs in. This variable is used to control things such as the navigation bar and …

Read More
How to access global js variable in AngularJS directive

First of all, I checked and I didn't find any article covering my question. How to access a pre-defined js global variable in angularJS built-in directive? For example, I define this variable in <script>var variable1 = true; </…

Read More
How can I define an AngularJS service using a TypeScript class that doesn't pollute the global scope?

I am using AngularJS and TypeScript. I want to implement an AngularJS service using a Typescript class, like this: class HelloService { public getWelcomeMessage():String { return "Hello"; } } angular.module('app.services.helloService', []).factory('helloService', () => { return new HelloService(); }); This compiles to …

Read More