location’s href vs replace vs assign in JavaScript

location.href vs location.replace vs location.assign

In this article, we will learn the difference between the location’s href vs replace vs assign in JavaScript.


location’s href, replace() and assign()?

  • A redirection should generally happen by the backend.
  • The backend sends correct HTTP redirect headers to the client and then the redirection happens on the client-side.
  • But if we need to redirect from the current page to a new page in JavaScript, we can do that as well using location.href, location.replace() and location.assign().
  • Below are some examples:
location.href = 'https://techtalkbook.com';
location.assign('https://techtalkbook.com');
location.replace('https://techtalkbook.com');
  • Now, you must be thinking that all of the above does the same thing then what’s the difference. right?
  • So let’s see and understand the difference between each of these location’s href vs replace vs assign and their usage.

Differences

location.href
  • It loads a new document in the browser.
  • It creates a new entry in the browser history with the URL provided.
  • You can go back to the previous page by clicking the browser’s Back arrow (<-) button due to the above reason.
  • It works as both getter and setter for the current page. So we can do two things using this:
    • Replace the current page with a different page by setting a URL.
      location.href = ‘https://techtalkbook.com’;
    • Get the URL of the current page.
      location.href;
  • Usage: If an old version of the page available in the cache then it loads the page from the browser’s cache and because of this, It does not always send the request to the server.
location.replace()
  • It is used to replace the currently loaded document in the browser.
  • As the name “replace” suggests, It replaces the current document entry in the browser history with the new URL provided.
  • You can’t go back to the previous page by clicking the browser’s Back arrow (<-) button because of the above reasons that is, it replaces the URL of the previously loaded page in the browser history.
  • In the below example,
    2nd entry “https://techtalkbook.com” will be replaced with the latest entry “https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3
    • With this, the browser history stack will have
      https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3 and then
      https://techtalkbook.com/category/javascript
    • So pressing the browser’s back button will go back to https://techtalkbook.com/category/javascript instead of https://techtalkbook.com
document.location.href = 'https://techtalkbook.com/category/javascript';
document.location.href = 'https://techtalkbook.com';
document.location.replace('https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3');
  • Usage: If you want to redirect the user to a new page but don’t allow navigation to the previously loaded page using the back button then use replace().
location.assign()
  • It loads a new document in the browser.
  • As the name “assign” suggests, It assigns/creates a new entry in the browser history with the URL provided.
  • You can go back to the previous page by clicking the browser’s Back arrow (<-) button because of the above reason that is, it creates a new entry in browser history without affecting the entry of the previously loaded page.
  • In the below given example, A new entry will be added without affecting the existing entries in the history.
    • So the browser history stack will have
      https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3
      https://techtalkbook.com and then
      https://techtalkbook.com/category/javascript
    • So pressing the browser’s back button will go back to https://techtalkbook.com
document.location.href = 'https://techtalkbook.com/category/javascript';
document.location.href = 'https://techtalkbook.com';
document.location.assign('https://techtalkbook.com/why-0-1-0-2-does-not-equal-0-3');
  • Usage: If you want to allow the user to navigate to the previously loaded page using the back button then use the assign() method.

What else

There is something more with location.assign(). Let’s see.

  • Security perspective:
    • If the origin of the script calling the method is different from the origin of the page originally described by the Location object then that’s a security violation.
    • It will throw a DOMException SECURITY_ERROR for this type of error.
    • If the provided URL is not valid then a DOMException of the SYNTAX_ERROR type is thrown.
    • If the domain of the provided URL is different from that of the current page then the security settings like CORS may prevent this to effectively happen.

References


Related Posts

Visit https://techtalkbook.com to find more related topics.

Happy Coding!!!


About the Author

Sandeep Agrawal
working @ Kalpavruksh Technologies as Software Engineer. I am a simple and straightforward person adaptable to any environment and work culture. Like to work in a creative and challenging environment using cutting edge technologies where I could constantly learn and successfully deliver solutions to problems.

Be the first to comment on "location’s href vs replace vs assign in JavaScript"

Leave a comment

Your email address will not be published.


*


2 Shares
Tweet
Pin2
Share
Share
Share
%d bloggers like this: