Refresh the page one time when a user loads the page? - javascript

In my small chat application I need to refresh the page once every time the page is loaded. This stops messages from being sent twice.
I have tried using sessionStorage to store whether the page has been refreshed, but this did not work because it was reset every time the page was loaded.
How can I check if the page has already been refreshed?

Related

Why is my website not loading on first load in react.js? If I press the reload button ,the site loads

My website doesn't load on localhost and my domain when first load. But the page works if I refresh the page. What could be the reason for this? Beacuse I'm not making any changes, only reaload page and page is load. And how can i solve this problem?

Following countdown timer

Is there a way to create a countdown timer that continues to countdown where it is left off when the user transferred to another page?
For example,
On page 1 the user clicks on the link which takes them to page 2.
The countdown timer on page 1 is XX:YY
Page two loads and the countdown is XX:YY and continues from there...
Yes, but it depends how are you developing you application.
If you are working on SPA, it'll be easy. Since your JS state won't change while user is navigating on your page, you just need to put the countdown on a global variable/singleton and update on it (remember that it could break if user open a new tab or refresh the page).
You also could keep this state on a SharedWorker and share this information between many tabs, and persist this data using Web Storage API.

Show loading screen only once per session

I am creating a “pseudo loading screen” which will display a full page div over the homepage once the page is opened and will disappear after a few seconds.
What I need to figure out is how to prevent this loading screen from showing after a user has clicked to another page on the site and then back to the home page (either using the back button or an anchor link back home).
Essentially I need the loader to only be shown the first time the user visits the website during the session, and only ever again during subsequent sessions.
(It would also be ideal if the loading screen was hidden when the home page is refreshed and if the loading screen appeared if the user begins their session on a page other than the homepage)
My best guess is that this will be achieved using localStorage but I’m new to JS so any suggestions on how to get this working would be great!
For your purpose, you can utilize the sessionStorage property of the window object. After showing the loading screen you can save this info in sessionStorage. For example:
sessionStorage.setItem('shown', true);
And when the page is rendered you can check if the loading screen has been shown:
if (!sessionStorage.getItem('shown')) showScreen();
A page session lasts as long as the browser is open, and survives over page reloads and restores. You can read more

How to prevent some scripts on page to not refresh with page reload

I have a website in which I've added a code with which it reloads every 1-2 mins.
All I want to do this is, place a timer code there, and put a go-to "X" URL script after that time is completed.
But timer and that script got refresh after page reloads?
How to prevent and at the same time implement timer and go to a URL?.
Any Ideas?
You can't refresh a page and keep it's script not refreshed, but... you can use window.localStorage or document.cookie!
I would check if the cookie exists.
If not: create a cookie, make it's value the current
Date.now().
If there is a cookie, compare it's Date to the current to get
the time passed. Then, you can redirect as wanted and delete the
cookie.

Javascript: How to execute command that will affect browser even after refresh?

Let's say I want to stop all videos from playing in the browser so while on the youtube.com page I run HTMLVideoElement.prototype.play = function() {}. I click around and since it doesn't do a full page refresh the JS persists.
However, if I press refresh, then my JS is reset and HTMLVideoElement.prototype.play once again points to native code. Is there a way to persist that command even on page refreshes?
JavaScript is run anew on every page load. This is by design and cannot be changed. Use a browser extension or a userscript that runs the script on each page load.
Things run on the console will be lost when the page navigates away (that includes navigating to the same page you're already on).
Is there a way to persist that command even on page refreshes?
Yes. So long as it's a page you control (so, not youtube.com) you can persist a setting before and after a page refresh by:
adding a hash fragment to the URI;
adding a query string to the URI
placing a cookie
using the window.name property
using HTML5 Web Storage (localStorage / sessionStorage)
By using javascript to query any of the above after the page reloads, you can re-establish the setting you had in place prior to the page refresh.

Categories

Resources