window:beforeunload executed on page refresh in Angular 5 - javascript

I want to clear some localStorage variables when browser close or browser tab close.
It's working totally fine but when I refresh the page it will also clear localstorage variables.
So, How can we differentiate the page refresh and browser close event in Angular-5 ?.
My .ts file code,
import { Renderer, OnInit, AfterViewInit,ElementRef,HostListener} from '#angular/core';
#HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
localStorage.removeItem('rememberMe');
}

This looks like an appropriate use case for sessionStorage.
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage; the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

Related

Is there any way to save information about open tabs if the page was closed?

I have a page that receives a URL and opens it in a new browser tab.
window.open('someURL','myWindow').focus();
After that, the current page is closed.
window.open('','_self').close();
The next time my page loads, the received url opens in a new tab.
How to make the received url open in an existing tab?
I cannot save the window object to localStorage, but maybe I can save the information about the tabs associated with it?
You can use local storage... The stored data is saved across browser sessions.
Set value:
localStorage.setItem('key', 'VALUE');
Retrive value:
const menu = localStorage.getItem('key');
If you want to remove keyValue pair:
localStorage.removeItem('key');

How to use sessionStorage for a webpage for a login user?

I have been using sessionStorage for a little bit now. As I came to know sessionStorage persist data till the window or tab is open. One we close the tab, sesstionStorage clears all data and create when new session is created.
Now my Question is How to clear sessionStorage for a particular session in which user logged in and logged out?
As per my investigation I think if we make a AJAX call to get the current user'id and at the time of log out we issue "sessionStorage.clear()" it should clear all the data persistance. Is there any other way to do this.
Note: sessionStorage should cleared out automatically when User logged out from application. Before downvoting, answer the question or just go back to your condo.
when you login
//Argument 1 and 2 both have to be strings
sessionStorage.setItem('login','{username: foo, other:sessionData,whatever:bar}')
when you logout
sessionStorage.removeItem('login')
Where login is just a name, you can call it whatever you want

Execute JavaScript code once a browser window/tab is opened for the first time

Is there a way to execute JavaScript code only once when a window or a tab in a browser is opened and then never again for the whole life-cycle of this window/tab (even when navigated away)?
One way to use window.sessionStorage like this.
if (!window.sessionStorage.getItem("isExecuted")) {
//execute code
window.sessionStorage.setItem("isExecuted", true);
}
MDN docs
The sessionStorage property allows you to access a session Storage
object. sessionStorage is similar to Window.localStorage, the only
difference is while data stored in localStorage has no expiration set,
data stored in sessionStorage gets cleared when the page session ends.
A page session lasts for as long as the browser is open and survives
over page reloads and restores. Opening a page in a new tab or window
will cause a new session to be initiated, which differs from how
session cookies work.
Here is a solution based on checking the window.history.length is 1 (i.e. the first time they've been to this window/tab). It also does a check that they've not simply refreshed the page.
if(window.history.length === 1 && performance.navigation.type !== 1){
alert("show me once per tab");
}
If you put the script you want to run once where I have my alert, it should work for what you are trying to do.
You can use localStorage.
Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
localStorage.getItem('key');
localStorage.setItem('key', 'value');
Doc: http://www.w3schools.com/html/html5_webstorage.asp

Return a user to last page visited on browser close/crash?

I have a page where a user is filling out a very large multi-page form. I'm using garlic.js to persist data into localstorage on the event of a crash or misclick of closing the browser.
What's the easiest way I can go about getting the user back to the last page they were filling out after logging back in, in the event of a crash or browser closing?
Can I use localStorage for this or cookies? Fairly new to javascript so the simplest solution would be appreciated!
In case your page does not have any pre-requisites, you can follow below steps:
On the page load, store the URL into the localStorage
As soon as any input field is changed, store its value in localStorage
Now the browser crash accidentally and you reopen your application.
From the localStorage -
Fetch the last page URL and load it into browser
As the page loaded, assign all inputs their previous values from LocalStorage.
What you could do:
Keep saving the data in localStorage every input
If for whatever reason the user browser crash and the client is disconnected, when he comes back, let him log back in, and let him access a new form.
On a new form, check if previous data exists, if so fill the inputs, if not it means that it's his first time.

How to know when window is opening first time?

I have a modal dialog window. Is there any event (or way) how to know when window is opened first time (not refresh, not postBack etc)? It is necessary for clearing cookie.
I assume you are the one coding the 'opening window' behavior. Why not store some variable (flag) that indicated whether the windows has been opened before or not? This can be a normal veriable or a session, cookie, local storage, etc. for long term storage.
If the just the cookie is your concern,
then change the cookie key(if you want to discard old cookie) or
don't set any expiration time for you cookie(if you want it not be sent with next fresh request) as default is session

Categories

Resources