detecting user closing tabs or leaving the site - javascript

I'd like to be able to tell when the user leaves the site so I can update a field in my database (particularly, a last_visit field in order to determine unread items for each user). However, I'm not sure how to manage the fact that sometimes, a user opens several tabs of the site, so I can't use onbeforeunload reliably to accomplish this goal.
Ideally, I would be able to update this field only when there is only one open tab of the site.
On the hand, maybe I could get more functionality by simply using a table to record read items for several days and assuming that threads older than that are read by default.
What do you think?
Regards

All I can think of is using either cookies or local storage to update the time at which they're viewing your site on each page load. This way, once they close all the tabs where your website is open, the cookie/local storage entry won't update, and you can access that value later on when they return.
So run this every time the page loads:
window.localStorage.setItem('lastVisit',Date.now);
And to grab it:
var lastVisit = window.localStorage.getItem('lastVisit');

Related

How do I make an alert that I can dismiss forever in BootstrapVue?

I'm looking to create a dismissable alert in BootstrapVue as described here. The alerts I've made based on the examples reappear when you refresh the page - I want to be able to make one that gets dismissed forever. This way, I can present an announcement to the user, but once they read and acknowledge it, they need not see it every time they revisit my page.
I'm not entirely sure how to go about doing that (I'm still learning Vue). Would a toggleable alert as described in the docs retain its state? Or is there a direct way to achieve what I need by saving the state of the alert (dismissed/not dismissed) in localStorage or similar?
Yes as you said, localStorage is perfectly fine to use it for this case.
Just bare in mind, that localStorage is only stored in the current device that user is using. For example, if the user uses mobile and checks your announcement then the announcement will not be visible in mobile, but if user opens other device(laptop, etc..) then the announcement will pop up again.
In case you want always to know for all devices (for each user account) then this should be saved in a database and through an api endpoint to get this information and know when to show the announcement.
Add item in localstorage:
localStorage.setItem('YourItem', response.data)
You can fetch this using:
localStorage.getItem('YourItem')
To delete this from localStorage:
localStorage.removeItem('YourItem')

Browser window specific variable in javascript

I want to store a specific value for each browser window.
This value should stay the same after a reload.
An example:
I want to open 2 tabs of my page, both of them should be able to show the data of two different accounts. E.g. gmail has the ability to swap between 2 logged in pages. And even if you refresh the tab, the visible account stays the same.
At the moment I have only one possible solution in mind:
Store the value in the url
Make sure that every link on this page pass this value to the next page
But this way seems to be a little bit "dirty". It gets broken if I miss a single link.
Is there a way to use a hidden input instead, or some other js features?
Btw: I'm using aspx and IIS as web server.
I think you should use cookie, they stored in browser and stay after reload.
Set cookie and get cookie with JavaScript

How can I disable the saving bookmark function for specific page just via the html code?

the requeirment is that I want to avoid the specific web page to save to bookmark,
and is there someway to acheive this funcion just use some code, maybe add or js code . thanks
The answer is no, the user can always bookmark a page as this is browser function, but you can use sessions. Then make sure that any request for a page
must have an active session id or it returns an error or redirects to the home page. The user can bookmark the page but the bookmarks will then only work for a short time (until the session expires). This also has the added benefit of
making the site impossible to index by search engines.
The closest you're going to get is if you open another window using JavaScript as you can control whether the menubar and toolbar are displayed.
window.open(
"https://www.google.com/",
"Google",
"resizable,scrollbars,status");
However, this is likely going to be blocked by their popup blocker.

Storing tab positions of multiple forms in cookie - how to prevent cluttering

I have a PHP and HTML based CMS. In each page of the CMS, there is a form with a Javascript-based tabbed dialog that switches between a number of DIVs.
From each page of the CMS, it is possible to open a preview page to see the changes made, and then return to the CMS. When the user returns, I would like the same tab page to be opened as when they left for the preview.
My current approach is to change the value of a cookie ("current_tab") each time the user changes a tab.
onclick='setCookie("current_tab", 5);'
When the tabbed dialog is generated, I check for the cookie and set the appropriate DIV to "display: block".
However, I need the cookie setting to be limited to that specific CMS page, and not all of them. If the user changes to a different page, the tab must not be pre-selected.
My current approach is to create a cookie for each page, e.g. for page ID 10254:
onclick='setCookie("current_tab_10254", 5);'
and, as an attempt of cleaning up, to remove that cookie when the page is rendered. But obviousy, this is not going to clean up every cookie that was set, because the user can choose not to return to the form, or navigate to a different page. I fear clutter through dozens of cookies in the system.
Does anybody have a better idea how to do this?
Try to Limit visibility of cookies by changing "path" parameter of cookie.
If structure of your application doesn't allow this, I'd suggest you not to use such approach, cause cookies are usually sent with every request, including requests to static information (images, css).
Why are you worried about removing the cookies? They will expire and remove themselves.

Get last visited site in another window using Javascript

I am creating a Firefox extension where I need to find out what was the last location visited in another window. Here is an example of what I mean. I present the user with a list of sites from a main interface window. The user clicks on one of the sites and a new window is opened to that site. From there, the user will navigate the site in the new window and will eventually stop browsing or close the window. I need to find out what was the last visited location from that window. Also, the user may be navigating more than one site at a time, so there could be many windows open. I need to know what was the last location for every one of them. So far, the only way that I got it to work is to use a timer and poll the new window every second for document.location.href. There must be a better way.
As far as I know this is not possible in (pure) Javascript due to security/privacy considerations. On the other hand, since you are writing a Firefox plugin you have additional mechanisms you can use.
For instance, you can create a greasemonkey plugin that is applicable to every site. This plugin will record the href using GM_setValue(). The main plugin will read this information via GM_getValue().

Categories