I have a problem with window event beforeunload in Angular app. i wants to check if the user navigate to another page, if so i want to clean sessionStorage. I use.

   onBeforeUnload(event: BeforeUnloadEvent) {
       event.returnValue = '';
   }

Beforeunload event also workd as a page refresh. How to check if the user leaves the application and clear the sesion storage after confirm dialog.

I have a problem with window event beforeunload in Angular app. i wants to check if the user navigate to another page, if so i want to clean sessionStorage. I use.

   onBeforeUnload(event: BeforeUnloadEvent) {
       event.returnValue = '';
   }

Beforeunload event also workd as a page refresh. How to check if the user leaves the application and clear the sesion storage after confirm dialog.

• javascript
• angular
• typescript
• window

Share Improve this question Follow asked Jan 28, 2020 at 7:44 CyloCylo 3311 gold badge11 silver badge55 bronze badges 2

• session storage means it will be auto cleared if he leaves your application means closing a tab or redirected to another website etc – shashi kumar Commented Jan 28, 2020 at 7:48
• If i use back navigate browser buttons, i have previous session :( and it is all my problem – Cylo Commented Jan 28, 2020 at 8:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can try below code in constructor of your ponent class.

Option 1

window.addEventListener("beforeunload", function (e) {
   exampleService.logout();
});

Option 2

 @HostListener('window:beforeunload', ['$event'])
     beforeUnloadHandler(event: any) {
     event.preventDefault();
     // any other code / dialog logic
 }

To distinguish from 2 cases, you should check out this stackoverflow question or related questions, here's one:

Question

Hope, this helps.

The following code will make browser to ask user that whether he wants to lose the unsaved changes or not.

Also, I'm checking whether the form is dirty or not.

If the form is not dirty, browser won't bother the user and close it.

import { Component, ViewChild, HostListener } from '@angular/core';
import { NgForm } from '@angular/forms';
import { DetailedUser } from 'src/app/models/detailed-user';

@Component({
  selector: 'app-member-edit',
  templateUrl: './member-edit.ponent.html',
  styleUrls: ['./member-edit.ponent.css']
})
export class MemberEditComponent {
  user: DetailedUser = new DetailedUser();
  @ViewChild('userForm') userForm: NgForm;
  @HostListener('window:beforeunload', ['$event'])
  WindowBeforeUnoad($event: any) {

    if (this.userForm.dirty) {
      $event.returnValue = 'Your data will be lost!';
    }
  }
  saveChanges(){
    ....
    this.userForm.reset(this.user);
  }
}

the following is the html section

     <form (ngSubmit)="saveChanges()" #userForm="ngForm">
        <div class="form-group">
          <label for="introduction">Introduction</label>
          <textarea
            name="introduction"
            class="form-control"
            [(ngModel)]="user.introduction"
            rows="6"></textarea>
        </div>
        <div class="form-group">
          <label for="lookingFor">Looking For</label>
          <textarea
            name="lookingFor"
            class="form-control"
            [(ngModel)]="user.lookingFor"
            rows="6"></textarea>
        </div>
      </form>