I seen many post regarding same problem but i am not getting exact solution. i want to delete cookie on browser or tab close event using javascript. I have made delete cookie function and called on onbeforeunload event. But i seen that event also called when page refresh i dont want to delete cookie on page refresh. And i seen in many post that they are detecting link click, keypress event of F5 and form submit and in that they preventing onbeforeunload event. But then what about refresh button click and press enter at url bar. So i think this is not a exact solution. so help me out from this problem.
Further information is i am creating cookie using PHP and want to delete this cookie on browser close.
Cookies are automatically deleted when the browser is closed, unless you specify a lifetime for the cookie.
If you want to delete a cookie on browser close, better would be to check if cookie exists on page load and delete that.
To delete all the cookies when browser close uses the following code
$(window).bind('beforeunload', function(event) {
var cookies = $.cookie();
for(var cookie in cookies) {
$.removeCookie(cookie);
}
return true;
});
Hope this will solve your problem.
Related
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.
Is there any way to handle page refresh in JavaScript ? After browser close button is clicked my application should be logged out and after clicking on browser back button application should be logged out also.
Try this snippet by clicking run and reload or backwards in your browser.
window.onbeforeunload = function(e) {
//call your function
return "Attention Reload"
};
Have a look at this eventHandler
Try This Answer
This answer will help you out
Also this only shows how to access the back button functionality in cross browser, However in the scope of those functions,
You can destroy your token or whatever to logout or you can directly use window.location.href, description of the same is given in Window.location.href
Hope that helps, Also if this does not solve specify more details in question that how are you logging out,
Thanks & Regards
Shohil Sethia
I have some check boxes in one of my webpages, and this page has to refresh every 1 minute for some data consistency issues.
I am using window.sessionStoage to persist the check boxes that have been checked so that the user doesn't lose the boxes already checked on page refresh.
But I want to clear the sessionStorage when the user navigates away from that page (not necessarily leaving my website, might be going to another page on the same website), and for the same if I use the onunload event then the storage will be cleared in case of refresh also.
Is there any other event or any workaround that could help me achieve this.
May you try to save the path/name of the current page in you session-storage and on each init of your page check if the pagename equals the name in the sessionstorage. If not, you can clear it.
For your particular case window events can be in handy. So you can react to the blur and focus events, so leaving your browser tab will cause blur event.
$(window).blur(function(){
//clear session
});
$(window).focus(function(){
//maybe some code to re-init session data
});
I have a page that doesn't allow user to refresh the page by clicking browser refresh button or pressing F5. So I want to simulate 'form resubmission' in order to show prompt message.
can someone guide me an approach to implement it?
Is there any cross-browser solution available for that?
To refresh without getting the prompt the page must have been fetched using HTTP GET
Make the form have method="GET" instead of method="POST" (and fix server processes to work with this change as apropriate)
Alternatively cache the post data in a session and redirect to the display page using HTTP code 303 immediately after form submission.
If you want to cause the prompt, make the link that takes the user to the page into a submit button on a POST form. if a user arrives with a GET request have serve them a page having javascript that submits a form converting the request into a POST request.
How did you manage to disable everything?
For the browser button, cross-compatible per MDN:
window.onbeforeunload = function() {
return "Data will be lost if you refresh the page. Are you sure?";
};
For the keystroke:
window.addEventListener("keyup", checkForRefresh, false);
var checkForRefresh = function(event) {
if (event.keyCode == 116) {
alert("Data will be lost if you refresh the page. Are you sure?");
}
};
The keystroke may need polyfill for IE8, but they provide it in the docs.
What you want is to listen for the beforeunload event and throw up a confirm box.
EDIT: Since you've stated in comments on another answer that you need to support Mobile Safari (which doesnt support beforeunload. You could try a library like jquery.AreYouSure
Per the discussion on this page, it supports Mobile Safari, though I havent used it myself
Note that some browsers will ignore the text you provide in the confirm call and show their default text instead. There are more in depth ways to get around that but this will prompt the dialog box.
$(window).on("beforeunload", function() {
return confirm("Do you really want to close?");
});
From other disccussion:
There are 2 approaches people used to take here:
Method 1: Use AJAX + Redirect
This way you post your form in the background using JQuery or something similar to Page2, while the user still sees page1 displayed. Upon successful posting, you redirect the browser to Page2.
Method 2: Post + Redirect to self
This is a common technique on forums. Form on Page1 posts the data to Page2, Page2 processes the data and does what needs to be done, and then it does a HTTP redirect on itself. This way the last "action" the browser remembers is a simple GET on page2, so the form is not being resubmitted upon F5.
You can refer this answer: https://stackoverflow.com/a/3968038/1853444
I want to set a cookie when a visitor on the page closes the browser.
I used onbeforeunload method like this
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
followed this link
But found out that even refresh of page or click on any hyper link on the page,pops up an alert.
I need to set cookie only when visitor clicks cross button of browser and not on page refresh.
I followed some of the links like the one above and another here. And found from the post that we can not differentiate between close and refresh. But those posts were 3-4 years back.
Is there is any way to differentiate these events using JavaScript or Jquery?
I'm afraid you have no way to tell.
The only thing you can do is overload clicks on links and set a flag. But you can never know if it is a refresh or a close...
Hmm, what about this:
Set a cookie onbeforeunload
Globally onload, check the timestamp of the cookie to see whether this was a link, or a new session
If the timestamp difference is only a few seconds, delete the cookie
Well, unload is called when browser is closed and onload is called when you try to reload. You can use these properties and set flags , and fire events accordingly
Browser close and reload Check this link for more details