I am trying to delete user cookies when the browser tab is closed. Is this achievable? Can I capture the browser tab close event without affecting refreshing?
If I attempt to use beforeunload or unload events, the function gets triggered when the user refreshes the page, which is not what I want. I only want it to execute when the tab is closed.
Is there a way to accomplish this in Angular?
Solving this problem is no easy task, unfortunately. However, it is possible to find a solution. The following answer is a compilation of various responses from Stack Overflow.
Simple Component:
Recognizing when the window is being closed can be achieved by using the onunload event handler.
Complex Component:
Distinguishing between a refresh, following a link, or closing the desired window can be challenging. Eliminating link follows and form submissions is relatively straightforward:
var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind('beforeunload', function(eventObject) {
var returnValue = undefined;
if (!inFormOrLink) {
returnValue = "Do you really want to close?";
}
eventObject.returnValue = returnValue;
return returnValue;
});
Simplistic Approach
Inspecting event.clientY or event.clientX to determine the action that caused the event to fire.
function doUnload(){
if (window.event.clientX < 0 && window.event.clientY < 0){
alert("Window closed");
}
else{
alert("Window refreshed");
}
}
Using Y-Axis isn't effective since it's negative for clicks on reload or close buttons but positive for keyboard shortcuts. X-Axis variations across browsers also pose challenges. Implementing a series of conditions based on event coordinates is not entirely reliable.
Advanced Strategy
(Attributed to Julien Kronegg) Leveraging HTML5's local storage and AJAX communication between client and server. Note: This method depends on browser support for HTML5 local storage.
Add an onunload handler to the window as shown below:
function myUnload(event) {
if (window.localStorage) {
window.localStorage['myUnloadEventFlag'] = new Date().getTime();
}
askServerToDisconnectUserInAFewSeconds();
}
And include an onload handler on the body:
function myLoad(event) {
if (window.localStorage) {
var t0 = Number(window.localStorage['myUnloadEventFlag']);
if (isNaN(t0)) t0 = 0;
var t1 = new Date().getTime();
var duration = t1 - t0;
if (duration < 10 * 1000) {
askServerToCancelDisconnectionRequest();
} else {
// handle tab/window close event
}
}
}
On the server side, manage disconnection requests and implement a timer thread to disconnect users after a specified time. Canceling a disconnection request removes it from the list, preventing user disconnection. This approach can also differentiate between tab/window closings and other actions like link follows or form submissions.
Final Thoughts:
If the objective is to clear cookies upon window closure to prevent their use in future sessions, the mentioned approach is suitable. By invalidating the cookie on the server once the client is disconnected, you can detect old session cookies during subsequent login attempts, enabling deletion and, if needed, issuance of new cookies.
$window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
console.log("Executing small interval actions on tab closure like cookie removal, but unable to prevent customer from closing.");
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
The possibility of performing foolproof actions at the moment of browser tab closure is a matter of debate. Due to the limited time available before closure, there are constraints in executing tasks successfully. If the user closes the tab before completion of necessary actions, it leads to uncertainty and reliance on client compliance. It is suggested to avoid heavy dependency on this method and ensure injection of $window.
javascript detect browser close tab/close browser
Recent Update:
After thorough research and taking into account various suggestions, creating sessions with inactive timeouts of around 25-30 minutes is considered the most effective approach in handling such scenarios. By converting essential cookies into timed-out sessions, you can manage data security effectively. Setting cookie expiry also aids in managing session times, however, ensures cookies remain until next login. Sessions with less than 25-30 minutes of activity pose risks if the client remains idle for prolonged periods. Exploring event capturing techniques including link (<a>), form submit (<submit>), and key press (keypress) events have limitations when addressing browser or tab closures prematurely. These challenges necessitate strategic design modifications towards a more reliable architecture to mitigate potential issues later on.
I have recently devised a rather straightforward solution to this problem that has not been addressed previously.
HTML:
<div
(window:beforeunload)="doBeforeUnload()"
(window:unload)="doUnload()"
>
... your code here ...
</div>
TS:
doBeforeUnload() {
if (document.visibilityState === 'hidden') {
this.tabWasClosed = true;
}
return false;
}
doUnload() {
if (this.tabWasClosed) {
... perform logout action ...
}
}
The reasoning behind using the beforeunload and unload events was as follows:
Value for document.visibilityState:
| beforeunload | unload | |
|---|---|---|
| tab closed | 'hidden' | 'hidden' |
| tab refreshed | 'visible' | 'hidden' |
By utilizing the visibilityState along with the beforeunload event, you can distinguish whether the user refreshed or closed the tab. In my case, I also incorporated some additional localStorage elements to monitor logout state, though this may be unnecessary for future users encountering this issue down the line.
For more information on document.visibilityState, visit MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
To ensure cookies are deleted when the browser closes, simply avoid setting an expiration date. Cookies will automatically be removed upon closing the browser.
It's unnecessary to track whether a user has closed their browser. There are more effective ways to achieve your desired outcome.
In conclusion:
If a visitor has left your page, it's not your concern what they do with their browser or computer. Detecting browser closure without user consent would likely not be feasible except through plugins or extensions.
Even though some time has passed since the original question was asked, I wanted to share my solution as well. To reload the page without losing cookies and remove cookies on window or tab close, I found using ng-keydown to monitor for the F5 key press (KeyCode 116) to be the most effective method.
HTML
<body ng-controller="exitController" ng-keydown="isRefresh($event)">
CONTROLLER
yourApp.controller('exitController', ['$rootScope', '$scope', '$window', '$cookies', function($rootScope, $scope, $window, $cookies) {
//initialized refresh to false, only set to true when a refresh occurs
$scope.refresh = false;
//Clear cookies on window/tab close
$scope.clearCookies = function() {
$cookies.remove('sessionData');
$cookies.remove('ss-id');
$cookies.remove('ss-pid');
};
//Check for refresh event triggered by F5 key press
$scope.isRefresh = function(e) {
var keyCode = e.keyCode;
if(keyCode === 116) {
$scope.refresh = true;
}
}
//Handle refresh requests
window.onbeforeunload = function (e) {
if (!$scope.refresh) {
$scope.clearCookies();
}
};
}]);
Ref:
To effectively handle the tab close event in your Angular application, it is recommended to utilize a HostListener for window:beforeunload either in your app component or the specific component you are focusing on.
@HostListener('window:beforeunload')
onBeforeUnload() {
return false;
}
One way to store data locally in the browser is by using sessionStorage. This allows you to utilize sessionStorage.getItem(...) and sessionStorage.setItem(...) much like how you would with localStorage. The main difference is that data stored in sessionStorage is not accessible in another tab within the same domain.
sessionStorage.setItem('test', 'test_value');
sessionStorage.getItem('test');
Just starting out with applescript and facing a challenge. I need to extract a string from a web page via Safari and assign it to a variable. The target string varies, but the words before and after it remain constant. For instance: Apple 1293.34 USD The ...
When I open Chrome and enter my-app:// in the URL or search bar, a dialog box pops up saying "Open my-app? A website wants to open this application". Clicking ok opens my Electron app. I'm looking to add similar functionality to my React app, where t ...
With the Nuxt module called nuxt-robots, how can I set up multiple disallow rules per user agent? Currently, my configuration looks like this: robots: () => { return { UserAgent: '*', Disallow: '/search/', Si ...
One of the conveniences of AngularJS is its $timeout service, which serves as a wrapper for setTimeout. Have you ever wondered why there isn't an equivalent for setInterval in AngularJS? ...
Looking to enhance my social feed page by adding a view count feature for each post. The challenge is figuring out how to keep track of views as the user scrolls down the page. Any suggestions? ...
I am currently following a tutorial on Vue.js from Savvy Apps, which utilizes Firebase with Firestore. As the tutorial mentions that Firestore is still in Beta, I anticipate potential changes - and it seems like that might be happening in this case. While ...
I want to save the employee object without the _id attribute, just the "employee" attribute as shown below: "employee" :[ { "name" : "leila", "idemployee" : ObjectId("59319505efa50b137477a1f4"), ...
I need a larger version of this data structure. [{ "votes":200, "invalid_votes":140, "valid_votes":60, "voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"} }, { "votes":300, "invalid_votes":40, "valid_votes":260, "voting_section":{"level":3, "zo ...
In my current setup, I have a configuration with REQ -> ROUTER -> [DEALER, DEALER... DEALER]. The REQ acts as a client, the ROUTER serves as a queue, and the DEALER sockets are workers processing data and sending it back to ROUTER for transmission to ...
I am using the .html method to append HTML content to a specific div ID within my file. <html> <head> Title <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> ...
I am struggling to find the correct method for reloading a datatable. Here is my current process: Retrieve data through ajax for specific columns Generate a table with the fetched data Initialize the datatable for the table Make a new ajax request using ...
In my Node.js application, I have set up an endpoint like this: usersRoute.get('/get', function(req, res) { //If no date was passed in - just use today's date var date = req.query.date || dateFormat(new Date(), 'yyyy-mm-dd&ap ...
While building a web page, I encountered an issue with my JavaScript code not working when using <!doctype html> or any type of <!doctype> at the top of the page. Can someone explain this error? After researching online, I learned that <!do ...
Currently, I have set up the code to remove the activeNote from the array called notes by using the DELETE_NOTE mutation. However, it seems that it only removes the first element of the array. The content of mutations.js is as follows: export const mutat ...
Is it possible to change the color of only this text to red? return <Typography style={{ color: 'red' }}>Login Invalid</Typography> I came across this online solution, but I am unsure how to implement it as there is no theme={color ...
Is it possible to programmatically move files or folders from a website using code? I am aware that with Python and Node.js, this can be achieved through the OS, path, and fs modules. Can JavaScript running in a website also handle file management tasks ...
Ever since I made the switch from JavaScript to TypeScript (Version 2.1.5), I have been facing an issue with the code that filters date selection. Despite my efforts, I haven't been able to find a good fix for it yet. Here are the two date-pickers: F ...
I'm currently working on achieving a similar effect to the one found on this website: . On that site, as you scroll down, the 'HELLO' text moves to the side. I've managed to do that part successfully, but I'm facing an obstacle reg ...
I have a simple form where users input text and it triggers an AJAX request to create a new comment. var CommentForm = React.createClass({ propTypes: { // ... // ... }, handleFormSubmit: function(e) { e.preventDefault(); var compo ...
Currently, I am working on a React application and I would like to incorporate grouping similar to what is shown in the image. I have looked into row grouping but it doesn't seem to be exactly what I need. How can I go about implementing this feature? ...