How to modify URL without reloading the page using JavaScript ?

Method 1: Replacing the current state with replaceState() Method: The history interface of the browser manages the browser session history. It includes the page visited in the tab or frame where the current page is located. Manipulating this state can be used to change the URL of the browser without reloading the page.

The replaceState() method is used to modify the current history entry and replace the properties of the state with ones in the passed parameters.

The parameters of this method have 3 parts, the state object which is a serializable object about the state, the title which is the title of the new state and the URL which is the new URL of the state.



The URL can be changed by passing the required URL as a string to this method. This will change the URL of the page without reloading the page.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to modify URL without reloading
        the page using JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to modify URL without reloading
        the page using JavaScript?
    </b>
      
    <p>
        Click on the button below to modify
        the current history state
    </p>
      
    <button onclick="modifyState()">
        Modify history state
    </button>
      
    <script>
        function modifyState() {
            let stateObj = { id: "100" };
            window.history.replaceState(stateObj,
                        "Page 3", "/page3.html");
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    replacestate-before
  • After clicking the button:
    replacestate-after

Method 2: Adding a new state with pushState() Method: The pushState() method is used to add a new history entry with the properties passed as parameters. This will change the current URL to the new state given without reloading the page.

The parameters of this method have three parts, the state object which is a serializable object about the state, the title which is the new title of the state and the URL which is the new URL of the state.
The URL can be changed by passing the required URL as a string to this method. This will change the URL of the page without reloading the page.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to modify URL without reloading
        the page using JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to modify URL without reloading
        the page using JavaScript?
    </b>
      
    <p>
        Click on the button below to add
        a new history state
    </p>
      
    <button onclick="addState()">
        Add history state
    </button>
      
    <script>
        function addState() {
            let stateObj = { id: "100" };
              
            window.history.pushState(stateObj,
                     "Page 2", "/page2.html");
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    addstate-before
  • After clicking the button:
    addstate-after



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.