Home » JavaScript » JavaScript Reload

Javascript location.reload(true) - JS Automatic Refresh

JavaScript is full of useful functions, location.reload() is one of them. This function refreshes the whole webpage. Similarly, JavaScript location.reload(true) hard-refreshes the webpage. But we can always reload the webpage by pressing F5 or by using the browser's reload button. So the questions that arise are, What use location.reload()?, and what is hard refresh? Let's find out the answer!


Javascript location.reload() method

The location.reload() method refreshes the current webpage from the browser's cache. Browser cache is temporary internet files that stores website's images, document, and data for faster future reloads. location.reload() use this cache data to reload the webpages.

Syntax of location.reload():

location.reload();

The Location reloads method can be invoked by a button click or by any other event. The most popular use is to automatically reload the webpage. This can be achieved by using setTimeout() with location.reload(). Look at the example below.

Automatic refresh works best for websites that need frequent reloads like news websites, sports websites that show live scores, etc. But these websites need updated data, right from the server. So, we have to tweak the function a little bit to start refreshing the page from the server(Next topic).

Example of location.reload() with button:


<!DOCTYPE html> <html> <head> <script type="text/javascript" src="scripts.js"> </script> <link rel="stylesheet" href="styles.css"> </head> <body> <1>location.reload function</1> <button onclick="sampleFunction()">Reload the page!</button> </body> </html> <script> (() => { setTimeout(() => { document.getElementsByTagName("body")[0].style.backgroundColor = 'white'; }, 50) })(); function sampleFunction() { location.reload(); } </script>

Output

location.reload function


Note: location.reload() doesn't have a return value.

Example of Automatic reloading of the webpage using setTimeout() method:


<html> <head> <title>JavaScript page refresh example</title> <script type="text/JavaScript"> function timeRefresh(timeoutPeriod) { setTimeout("location.reload(true);", timeoutPeriod); } </script> </head> <body onLoad="JavaScript:timeRefresh(5000);"> <h3>This page will auto refresh after 5 seconds.</h3> </body> </html>

JavaScript location.reload(true) - Reload from server

JavaScript location.reload(true), can you spot the difference? Yes, a parameter is passed in the function, 'true'. This is how we refresh the webpage from the server, it's that easy. It is a boolean parameter, so, it has only two values true and false.

By default, location.reload() has 'false' passed as a parameter. This parameter is for hard refresh from the server. When false gets passed, the webpage reloads from the browser's cache. However, when true gets passed, the browser requests server for a fresh copy of the webpage.

Note: As, false is default parameter, location.reload() means location.reload(false).

You can also check JavaScript Window Location that contains the information about the current URL.