How can I clear the local storage by closing all the tabs of the same domain (not closing one tab) or the entire browser? Session storage is not useful here as it cant share data with other tabs, so I haven't used session storage here. If I use event listeners like beforeunload, it is getting triggered even on page refresh, So what is the possible way to implement this concept in React?
Upon trying with taking count of tabs on loading and unloading, still, it is causing problems when there is one tab remaining. Can anyone please help me with an idea for this concept?
Use sessionStorage. There's a trick that involves writing token to localStorage that would tell the sessionStorage that there's shared data between tabs which can be retrieved using that token. See https://medium.com/#marciomariani/sharing-sessionstorage-between-tabs-5b6f42c6348c
I will try to paste some snippets from there, but really I don't know if that's allowed
You might want to look at the Broadcast Channel API
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
This API allow you to communicate between tabs, iframes, etc. sitting on the same origin.
Related
We are looking for a way to prevent users from opening the application in multiple tabs under the same browser.
The idea is to get plugged into one of the query Filter and then get access to the session maybe, and check if there is an already opened tab before proceeding.
I looked into httpSession and HttpRequest stuff but found nothing that can help.
Is there any functionality in the java side to know if the app is already opened in another tab?
thanks,
There's ways to accomplish this with Javascript.
See past questions / answers
How to prevent same website open multiple tab pages?
Stop people having my website loaded on multiple tabs
Preventing user from opening multiple tabs for the application
But all of those javascript techniques fail to work if ...
your user simply turns off Javascript.
they load the website from multiple browsers.
they load the website from normal and incognito modes on the same browser.
they load the website from multiple devices (laptop and cell phone).
You'll wind up with a mix of feature to attempt to prevent this (but it's a losing battle, and there's countless ways to get around it).
If you have a login, you'll want to track past logins and offer to disconnect / invalidate those other logins on a new login. (this will help with the multiple browsers and devices attempts). Your authorization layer on your server side will invalidate old sessions if they are attempted to be used.
If you have multiple tabs in the same browser, the javascript techniques from the old questions/answers are probably the best.
There are also people attempting to use websocket to act as the single point of communication, but I don't understand how that could work, but you'll come across it in your research.
From the server's perspective, it doesn't matter if the requests come from the same browser tab, different tabs, different browsers or different devices. Two tabs can share the same session. There is no way for the server (or the servlet) to know whether the request came from tab A or tab B. Tabs are a browser feature, it doesn't get sent in the HTTP header.
If you would elaborate on why you want to do this, I might be able to give a better answer.
I have a SPA that I cannot leave due to the fact that if the user leaves/refreshes, some information might be lost.
I want to implement the Instagram API, however the API requires that you browse to a different URL, login, receive a code in your URL, and then get redirected back.
Since I cannot do this directly from my site, I must open a new window to do this.
How can I retrieve the code from the URL in a separate window to send back to my site in the original window?
I have looked at websockets (need a server, so no) and WebRTC (on localhost, did not seem to work) already with no luck. Any suggestions?
If the API allows using an iframe, you can watch what's happening inside the iframe or communicate from inside the iframe using parent.instagramLogin(data) (where instagramLogin is a function you defined outside the iframe).
An alternative option is to automatically close the login tab once the login is finished, and when the main tab is focused again (window.onfocus) send an ajax request to check if the login was completed. (and of course keep checking every time the event fires until you get a result or until it becomes irrelevant.)
Update:
I found a reliable way to communicate between open tabs, using BroadcastChannel if supported, otherwise storage event from localStorage. You can find the details here, and someone in this link even made a small library to make it quick and easy.
I have a website which saves a stringified JavaScript object into the sessionStorage. It works well on desktop browsers - data survives over page reloads as per described on MDN.
On Android phones, it is not uncommon that a tab is reloaded when user switches back from another tab or when the browser is brought back from background to foreground, and I expect the sessionStorage will persist. This doesn't however seem to be the case. The sessionStorage is gone missing, as if a new session is created.
I have thought of using localStorage instead, which will not expire even if the session is closed. It doesn't really sort out all my problems though - as I expect a user can open it multiple times on multiple tabs, and do different things on each of them.
So my questions are:
Is the sessionStorage behavior described above as expected? If not, what can I do to rectify it?
If the behavior is as expected, and I have to rely on localStorage, how can I identify the object stored for each individual tab?
Thanks in advance for your help!
As others commented, SessionStorage is temporary by design. Mobile browser lifecycle is highly geared towards reducing resource usage and tabs are teardown more aggressively.
To workaround this issue, you can push a random tab ID to the URL and then prefix all LocalStorage keys with this ID. When tab is refreshed you simply read the tab ID from the URL and use it for accessing data in LocalStorage.
LocalStorage has a very simple API, so you could write a wrapper hiding the key prefixing away from your other code.
Yes, that is how sessionStorage works. The behavior is expected.
sessionStorage is unique per tab. If the user closes the tab the sessionStorage gets deleted.That is, the session storage is saved only as long as user stays on the tab.
Whatever you store in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
So, yes, it'd be better to use localStorage and clear it out at the end of the session.
I am working on a small application but I am stuck on a problem. I want stored form element values on a HTML page when filled in on one browser(Ex. Firefox) and auto fill data when same page is loaded in another browser(Ex. Chrome). If anybody has any ideas please help me.
Unless clients can login and you're willing to share this data via your server, you can not change behavior of a different browser from your current, so in your example Firefox can not change a cookie, localstorage or whatever of Chrome. Browsers tend to only share information like cookies when they are first ran; such as with you the import wizard from Firefox.
I can think of two alternatives to achieve this:
An authentication system where the data is stored server-side.
Through custom browser extensions. You could create a custom browser extension that directly writes the data of the other browsers. This does require the user to install that extension though.
This link explain how to achieve that http://www.nczonline.net/blog/2010/09/07/learning-from-xauth-cross-domain-localstorage/
It's not simple, but it's the way that I know it can be done at the moment without the use of cookies.
This question already has answers here:
Persist variables between page loads
(4 answers)
Closed 7 years ago.
Is it possible to keep my (global) variables when the page is reloaded? If yes, how?
Thanks for any help.
Best regards.
Try this cookie-less javascript function.
It basically store your data in the window.name property which does not clear the value when you reload the page or goes to another site.
You can persist data across page reloads via something like window.localStorage, window.sessionStorage (proprietary Mozilla extension) or database abstraction (window.openDatabase) provided by some of the WebKit -based browsers. See this article on MDC for a nice overview of Storage interfaces and this WebKit article on their database introduction.
In the same style you can store string values in the hash key.
Using the property:
window.location.hash = 'flight/105';
Then when refreshing the page you initialize back your variables.
The JavaScript environment will be reset when the browser leaves your page. However, you could register an onUnload handler to serialise your array to a cookie, then check for this every time the page is loaded and unserialise it if present.
Does your browser have a reset button, or do you mean the reload button?
When the page loads, everything is loaded fresh. There is nothing left from any previous page. The only place to store anything that survives loading a page is in a cookie.
Note that the amount of data that you can put in cookies is limited to a few kilobytes per site. The exact limit varies from browser to browser, but you can't expect to be able to put more than perhaps a kilobyte or two worth of data in cookies.
Are you talking about Cookies? If so you might want to review this open-source module
This will easily allow you to store cookies, that is data, even after a browser reload click. This makes doing it really easy and it is what I use.
var cookie = new HTTP.Cookies();
cookie.write('mydata', 'myvalue', '+1y');
//later on you can get that data EVEN AFTER a reload
var x = cookie.read('mydata');
You probably shouldn't try to make a cookies implementation from scratch though because it is very painful and you have to do a lot of testing across web browsers, such as to make sure Internet Explorer works.