Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to reload page only once in JavaScript ?

  • Last Updated : 12 Mar, 2021

In this article, we are going to implement a JavaScript code that would allow us to reload a page only once.

The Simplest implementation:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

window.location.reload()

It is the simplest inbuilt method in JavaScript that will reload the page, but the task is to refresh the page/reload the page only once.

As this JavaScript method reloads the page repeatedly & to fix this issue, we are going to use Location Hash property explained in the example. 



Example 1: This example describes the Location Hash property.

  • The hash property sets or returns the anchor part of the URL, including the hash/pound sign (#).
  • When using this property, do not include the pound (#) sign with the hash string.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
  
<body>
  <script lang="javascript">
    const reloadUsingLocationHash = () => {
      window.location.hash = "reload";
    }
    window.onload = reloadUsingLocationHash();
  </script>
</body>
  
</html>

Output: The URL changes from http://127.0.0.1:5500/index.html to http://127.0.0.1:5500/index.html#reload 

Example 2: In this example, we are going to do the same thing but without using location.hash property & without changing/adding hash(#) sign to the URL of the page.

We are going to use DOM location reload() method to achieve the same.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
      
    <script type='text/javascript'>
  
        // JavaScript anonymous function
        (() => {
            if (window.localStorage) {
  
                // If there is no item as 'reload'
                // in localstorage then create one &
                // reload the page
                if (!localStorage.getItem('reload')) {
                    localStorage['reload'] = true;
                    window.location.reload();
                } else {
  
                    // If there exists a 'reload' item
                    // then clear the 'reload' item in
                    // local storage
                    localStorage.removeItem('reload');
                }
            }
        })(); // Calling anonymous function here only
    </script>
</head>
  
<body></body>
  
</html>

Output: Page reloads without modifying the existing URL and this all is possible because of the HTML DOM window local storage.




My Personal Notes arrow_drop_up
Recommended Articles
Page :