JAVASCRIPT Window location.replace () new URL method

JAVASCRIPT Window location.replace () new URL method explained

JAVASCRIPT Window location.replace () new URL method

The window.location.replace() method is used in JavaScript to replace the current document with a new one. This method changes the URL of the current window to the URL specified in the parameter, and the new document replaces the current document in the history list. This means that after using location.replace(), the current page will not be stored in the session history, so the user will not be able to use the back button to navigate back to it.

Here is the basic JavaScript syntax for using location.replace():

window.location.replace("http://www.new-url.com");

Key Characteristics

No History Entry: 

The main difference between location.replace() and location.href is that location.replace() does not create a new entry in the browser's history. Therefore, the user cannot navigate back to the previous page using the back button.

Same-origin Policy: 

The URL is passed to location.replace() must adhere to the same-origin policy, meaning it must be of the same origin as the current document unless CORS (Cross-Origin Resource Sharing) headers are correctly set on the server.

Use Cases

Redirecting after Form Submission: If you want to redirect users after a form submission without allowing them to go back to the form using the back button.

Updating URLs without History: When you need to update the URL in a single-page application without adding a history entry, often used in route management.

Example

// Redirect to a new URL

window.location.replace("https://www.example.com/new-page");

In this example, the current document is replaced with the one at "https://www.example.com/new-page", and the original document is not saved in the session history.

Alternative: window.location.href

If you do want to allow users to go back to the original page, use window.location.href:

window.location.href = "https://www.example.com/new-page";

This will navigate to the new URL and keep the current page in the session history.

Understanding when to use location.replace() versus location.href depends on whether you want to preserve the current page in the user's history or not.