JavaScript location reload true - Refresh a Page [SOLVED]

Table of Contents

JavaScript location reload true refreshes the page at the current URL with data from the server.

window.location.reload(true)

The default behavior of the reload method is false, which refreshes the page with the browser's cached data.

window.location.reload()

But, what exactly is the window, location object or reload method? What is the alternative way to refresh the page without JavaScript location reload true?

Find out below.

Understand the window and location objects

JavaScript code interacts with the browser API through the window object. The object lets you use multiple JavaScript objects like AbortController and Array. The (global) objects' names start with capital letters.

For example, you can use the Array object to create a stack of three elements: window, location, and JavaScript location reload true.

const outline = window.Array('window', 'location', 'JavaScript location reload true')
console.log(outline) // ['window', 'location', 'JavaScript location reload true']

The window object also has window-specific (not JavaScript) objects like document and location. The document object lets you interact with the DOM.

window.document.querySelector(<selector>)

On the other hand, the location object has information about the current URL. It has attributes like href, protocol, hostname, pathname, and search.

{
    "ancestorOrigins": {},
    "href": "http://localhost:5500/",
    "origin": "http://localhost:5500",
    "protocol": "http:",
    "host": "localhost:5500",
    "hostname": "localhost",
    "port": "5500",
    "pathname": "/",
    "search": "",
    "hash": ""
}

Besides, the location object has methods like assign(), reload(), replace(), and toString().

Since window is the root object, you can use its attributes and methods without explicitly attaching them to the object. For example, location.reload() does the same thing as window.location.reload().

ALSO READ: JavaScript Double Exclamation Mark Usage

The ins and outs of JavaScript location reload true

reload() method does what pressing f5 or the browser's refresh button does.

location.reload()

location.reload() refreshes the page from the browser's cache. Browser cache composes temporary assets. Examples of the assets are images and data needed for faster future reloads.

You can invoke a page reload through a button click or run the method in a timer like setTimeout(). For example, you can program the page to automatically refresh after 5 seconds, as follows.

(() => {
    setTimeout(() => {
      location.reload()
    }, 5000)
})()

The outer Immediately Invoked Function Expression (IIFE) runs the setTimeout() function. The setTimeout() function runs a callback function that refreshes the page after 5000 milliseconds using the location.reload() method.

However, sometimes you may need to refresh a webpage whose data changes dynamically like sports and news websites. That is where JavaScript location reload true comes in.

location.reload(true)

The webpage requests the server to supply it with updated data. Such a type of refresh is called hard refresh. You can turn the feature off by replacing true with false or specifying no parameter.

location.reload(true)
// OR
location.reload()

Now that you understand the role of JavaScript location reload true, let me show you how to use it practically.

Lab environment setup

mkdir reloadPage && cd reloadPage
touch index.html
code .

We create the project directory called reloadPage and navigate to it. Next, we create the HTML file to implement code to refresh the page. Lastly, we open the project directory with Visual Studio Code.

ALSO READ: How to do JavaScript Array Slicing? [SOLVED]

Practical example

Let's write the code in index.html to refresh the web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript location reload true</title>
</head>
<body>
    <button onclick="refreshPage()">Refresh Page</button>

    <script>
        const refreshPage = () => location.reload()
    </script>
</body>
</html>

We run the refreshPage() function whenever the button gets clicked. The function implements JavaScript location reload. You can launch the web page using Editor's Live Server extension or copy the HTML file's path and open it in a web browser.

We can be more creative by redesigning the page body and button on page refresh. Let's do that by adding main.js and style.css, then linking them to index.html.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
    <title>JavaScript location reload true</title>
</head>
<body>

    <button>Refresh Page</button>

</body>
</html>

style.css

.body {
    background-color: #212121;
    margin: 3rem auto;
    width: 50%;
}

.button {
    padding: 1rem;
    border-radius: .4rem;
    border: .3rem solid #212121;
    background-color: green;
    color: #f7f8fc;
    cursor: pointer;
}

We make the body dark and push the elements toward its center. We also make the button green and enlarge it.

main.js

const btn = document.querySelector('button')

btn.addEventListener('click', () => {
    location.reload()
    document.body.classList.add('body')
    btn.classList.add('button')
})

The new (body and button) styles do not get applied on the page until we click the button. The button click initiates an IIFE which refreshes the page,

location.reload()

applying the .body and .button classes to the body and the button, respectively.

ALSO READ: Check if string contains spaces in JS [SOLVED]

If the new data came from a web server, we could add the true parameter to refresh the web page.

location.reload(true)

Summary

JavaScript location reload true refreshes the page server-side.

window.location.reload(true)
// OR
location.reload(true)

Removing the true parameter leads to refreshing the page with the browser's cache.

window.location.reload()
// OR
location.reload()
// OR
location.reload(false)

Understand the window and location objects

The ins and outs of JavaScript location reload true

Lab environment setup

Practical example

Summary

Further Reading

Leave a Comment Cancel reply