so I want my app that when I close the tab is to clear the localStorage, so I tried this:
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
this.localStorage.clear()
e.returnValue = '';
});
But the problem is it also runs when I refresh the page so the items on my localStorage gets cleared even on refresh and now I have to re log in again, is there a function that only detects when I close the tab?
I don't think you can. There is very limited information about what goes on in a browser outside of your app. Many of these functionalities are available through particular APIs instead of being directly exposed.
I suggest using session storage as this is its default behaviour and intended use.
This remind me that you can only know that a 'POP' action was dispatched when a user clicks the back or forward buttons. You cannot know which one of them was pressed though.
Related
I want to detect when the user closes the browser while my website is active
Since I am storing data in my local storage, I need to know when this event takes place in order to delete that data that I previously saved in local storage.
I am working with onbeforeunload to be able to capture the events, only this is activated when you press "f5", close the browser and close the page, I need to know how to validate so that it is only activated when I am closing the browser, could you help me?
I leave the small fragment of code that I implement, it is worth mentioning that I am working with React
function App() {
window.onbeforeunload = function(evt) {
localStorage.clear(); return '';
}
return (...)
}
I want to implement logout functionality when user closes the tab. I am storing JWT tokens in my local storage which are needed to be cleared every time user closes the tab without clicking the 'Log out' button in my React.js application.
All over the internet, I find 'beforeunload' event being used, but I think it gets fired when we refresh the page or navigate to other page via clicking a link, which is not what I want.
Also, is there a way to find if user closed the tab or the window in JavaScript?
Any help would be appreciated. Thanks.
Try beforeunload event listner
window.addEventListener("beforeunload", function (e) {
//Log Out Call
}
But it will not work in all browsers.
I'm building a text editor in my website, the workflow is as follows.
In /list, the user picks an entry they want to edit from a list which takes them to /edit/[article_id].
The user does their work, and then clicks submit.
The server processes the thing, and redirects them back to /edit/[article_id] which by now reflects the edited work. The server also activates a flash message on the page to indicate the edit was successful.
By this point, the user probably wants to go back to /list and clicks the browser's Back button. This will take them back to the editor repeatedly depending on how many times they submitted.
I've tried putting a Back button somewhere on the page, but a good many users simply ignore it.
I'd rather not make the submission posted via AJAX, since that would also affect the flash message system.
What I like to do, is replace the last entry on the history list when the user submits, without changing its length. Is it possible?
Try this
window.location.replace(url);
after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
Use window.close():
close();
Note: the current tab is implied. This is equivalent:
window.close();
or you can specify a different window.
So:
function close_window() {
if (confirm("Close Window?")) {
close();
}
}
with HTML:
close
or:
close
You return false here to prevent the default behavior for the event. Otherwise the browser will attempt to go to that URL (which it obviously isn't).
How can I use javascript or AngularJS to detect the browser or tab closing and allow the user to prevent it through a dialog message?
I have an AngularJS app that saves data to session storage so that the user can refresh the page without losing their state and also have multiple separate instances of the app open in different tabs without having to sync data.
If the user closes the tab or browser then they lose their work in progress because the session is unloaded. I want to detect when the session is being destroyed and show a message to the user that informs them they will lose their work in progress if they proceed and allow them to select OK to continue closing the browser/tab or cancel to stop prevent it from closing. I only want to show the message on browser/tab close, not when the user hits the refresh button or navigates to a new page.
Note 1: I need to use session storage and not local storage because different tabs need to be isolated instances of the app and cannot share data.
Note 2: I've tried the unload and beforeUnload events but these don't work because they also fire when the refresh button is clicked or the user navigates away from the page. I only want to show the message before the session is destroyed, i.e. when the tab/browser is actually closed.
Note 3: This is a corporate app for internal company use and I know all the users and their use cases so I am not worried about annoying them with the popup message. I realize that preventing a user from closing the app would be a bad user experience on a public website but his is a very controlled scenario.
Ideally you could just use the beforeunload event lifecycle.. but as you mentioned you can't. From what I know, there is no other way to bind a method to a similar event.
That said, you might also want to reconsider your first note. You could create a hash for each new session, and store the session stuff under that key in localstorage.
Using Javascript is it possible to hook a custom function to the browser back button while preventing the default event?
So simply put, the user clicks the browser back button, and instead of being taken back to the previous page on my site, my function fires. My aim is not to to prevent the user leaving my site.
Something like the below pseudo code:
window.backbutton.click(function(e){ preventDefault(e); myFunc(); })
FYI What I actually have is an internal back/forward system controlled by buttons within the view and I'd like to trigger my buttons when user clicks browser back.
You should look into Browser History https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history . It is a new standard for emulating pages (back and forward) on a single-page site.
you can do this
$(window).bind("beforeunload", function() {
return "Are you Sure you want to do this even though there are internal navigation buttons? if you do whatever you have done so far
will be gone unless it has been completed and/or submitted "; //
Return whatever message you want
});
Edit: this method displays a confirmation with the message and
automatically places buttons in the confirmation window
the author also clearly stated he does not want to prevent users from
leaving his site
see js fiddle http://jsfiddle.net/JW9fX/
Aaron - "updated question, I do not want to prevent them leaving my
site – Aaron 27 mins ago"
Edit: there is no definitive way to display a message only on the back
button in my knowledge i have also looked and have seen the only
methods that pick up on the back button are
$(window).bind("beforeunload",function(){return;}) and
$(window).onbeforeunload = function(){return;} and they both pick up
on when the page is refreshed or any other navigation away from the
current page. This is currently the best answer that can be provided
in the year 2014
Edit:
above is for all unload events
http://jsfiddle.net/Lhw2x/85/
been messing with that through all its lower objects it cant be done through javascript till someone decides to make all major browsers use a specific name for each unload event instead of it just being an unload event
so the answer is no you cannot hook a custom function to the browser back button while preventing the default event using javascript