Home » JavaScript » JavaScript Reload

Javascript location.reload(true) - JS Automatic Refresh Method

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:

Example Try this code »

<!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:

Example Try this code »

<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).

Summary

The Javascript reload() method is used to reload the current document or URL. The javascript location.reload(true) method work just like reload button in your browser. By default, the JS reload() method reloads the page from the cache, however you may force it to reload the page from the server side by setting the forceGet parameter to true: location. reload(true).

Frequently Asked Questions

Is location reload deprecated?

We use location.reload() to reload web document and it is the valid syntax. It is only the reload with forcedReload which is now deprecated.

How To Solve location.reload(true) is deprecated Error?

To Solve location.reload(true) is deprecated Error we should use location.reload() without the forceReload flag.

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

Recommended :

1 . How to use comments in JavaScript ?
2 . For loop in JavaScript
3 . Role of Numbers in JavaScript
4 . JavaScript Date Method

5 . Create Cookie in JavaScript
6 . Error Handling in JavaScript
7 . Create Youtube Thumbnail Generater in PHP
8 . Photography Snippets using HTML and CSS

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors