Discovering the Browser Refresh and Close Events in Angular JS: A Comprehensive Guide

Hello, I've attempted using the event below to detect something, but occasionally it doesn't trigger when closing the tab or browser.

$window.addEventListener('beforeunload', function(event) {
    // Your code here
});

Answer №1

If you are looking to trigger an action only when the browser is closed, but not when the page is refreshed, you can achieve this using the following code snippet:

   window.onbeforeunload = function () {
    if (performance.navigation.type == 1) {
        localStorageService.remove("authorizationData");
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tips for storing user input into an array

I am currently developing a calculator that uses Json data. The goal is to retrieve the Grid Code associated with a specific longitude and latitude input. However, I am encountering an issue where the result returned is 0, indicating that the value of the ...

Determining if a URL links to an image when the file extension is not informative

I am currently working on building an AJAX call to retrieve data from an API with a messy data structure. The challenge I'm facing is that the array returned by each AJAX call can contain up to 30 elements, some of which have image URLs without a file ...

Hiding a Div Using jQuery Depending on User's Choice

Currently, I am in the process of developing an employee directory using AJAX/jQuery with the assistance of the Random User Employee Directory API. You can access the data feed that I am utilizing by following this link: I have successfully created a webp ...

The AJAX POST request is not receiving the JSON data as expected

After creating an HTML form with the following structure: <form id="loginForm" name="loginForm"> <div class="form-group"> <input type="username" class="form-control" id="username" name="username" placeholder="Your username..." > ...

Swap two pairs of elements in an array in a random order

I have a list of team members and also 2 substitute players: team = Samson, Max, Rowan, Flynn, Jack subs = Struan, Harry I am facing a challenge in randomly swapping the 2 subs into the team. The difficulty lies in ensuring that only these 2 elements are ...

Authorization header is swapped out by Internet Explorer 11

Why is Internet Explorer replacing the HTTP header? Authorization : Bearer <server-provided-token> with Authorization : Negotiate <some token> when sending an AJAX request? The Issue In some cases, Internet Explorer replaces the header Au ...

@vx/enhanced responsiveness with TypeScript

I am currently utilizing the @vx/responsive library in an attempt to retrieve the width of a parent component. Below are snippets from my code: import * as React from 'react' import { inject, observer } from 'mobx-react' import { IGlob ...

Refresh the Angular model once the input value has been assigned using jQuery

My current situation is as follows: I have an input element whose value is being changed using jQuery's val() method. I am attempting to update the Angular model with the value set by jQuery. I tried creating a simple directive for this purpose, but ...

Dynamic Form Layout with Angulajs' Adaptive Data

As a developer, I have created a form using a directive and I am supplying the layout data from my controller. TheController.js [{ "type":"selectbox", "name":"name_one", "label":"Name One" }] This information is then sent to my form_directive which handl ...

What strategies can I use to refactor this controller in Angular 1.5 to make it more concise and efficient

I am encountering an issue with a component I have that contains a button. Whenever the button is clicked, it triggers one of two backend services depending on where the component is located. To achieve this, I am currently passing a flag to the component ...

LeadFoot's intern framework encountered difficulty locating an element

I am currently in the process of writing functional test cases using the leadfoot intern framework. The specific test case I am working on involves entering text into a form field and clicking a button that triggers the opening of a bootstrap modal. My goa ...

adjustable canvas dimensions determined by chosen images

I would like to create a canvas image based on the selected image <canvas id="canvas" ></canvas> <input type="file" id="file-input"> Using JavaScript: $(function() { $('#file-input').change(function(e) { var file ...

Perform a series of clicks

I'm attempting to click a button multiple times. After each click, the button takes 1 second to load, then reappears and can be clicked again. My goal is to click this button a total of 5 times. for(i=0;i<5;i++) $('.class').click(); ...

Ensure the appropriate TypeScript types are utilized for error middleware in Express

Struggling to properly define the types in my express application. I am encountering issues with my middleware error function and cannot seem to find a suitable example or get the correct types set up. Despite numerous attempts, here is my current version: ...

Navigating on Angular 2 without refreshing the page

Seeking advice for my Angular 2 single-page application project which heavily uses maps. The main requirement is that when a point on the map is clicked, the URL should update so that upon refresh, the map zooms into that specific point (and also to allow ...

Is it possible to use wildcards in Socket.io rooms or namespaces?

The hierarchy I am working with is as follows: Store -> Manager -> Assistant In this setup, a Manager has access to everything that the Assistant sends, while the Assistant can only access what the Manager explicitly provides. My understanding is t ...

Stop Angular from duplicating attributes by setting the replace parameter to true

The code snippet below demonstrates an Angular directive: var app = angular.module('demo', []); app.directive('myDirective', function() { return { restrict: 'E', template: '<h1>Foo bar</h1> ...

The array is not receiving the objects as intended

I'm facing an issue with my event listener that is supposed to push new messages to an array, but it seems to only be pushing the strings. Here is the code snippet: async function consume() { try { let result = []; const connection = await a ...

Need to get an item from a collection at the library?

Is it possible to import and use an object from a library? For instance, suppose we have a file named data.js with the following content: return { "name": "Testing" } In the file index.js, could we do something like this: const data = require('. ...

Update information interactively in Vuejs for all stored data

I am facing an issue with my code where the totalUserPosts value is returning as Zero after an AJAX call, and I need to find a solution for this problem. new Vue({ el: "#app", data: { totalUserPosts:0, }, methods:{ getPostsAjax () { $.ajax({ ...