How to Get the URL of the Last Visited Page in JavaScript
![How to Get the URL of the Last Visited Page in JavaScript](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F08%2Fjavascript-get-last-page-url.png&w=3840&q=75)
We can get the last page URL in JavaScript with the document.referrer
property.
For example:
const lastPageUrl = document.referrer;
console.log(`Last visited page URL: ${lastPageUrl}`);
document.referrer
is a readonly property that returns the URL of the page used to navigate to the current page.
Here's a more practical example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body>
<a href="get-last-page.html">Link</a>
</body>
</html>
get-last-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body>
You visited this page from: <span id="last-page"></span>
<script src="get-last-page.js"></script>
</body>
</html>
get-last-page.js
const lastPage = document.getElementById('last-page');
lastPage.textContent = document.referrer;
![Showing the last page URL on the visited page.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F08%2Fgif-33.gif&w=3840&q=75)
Limitations of document.referrer
The document.referrer
property doesn't always work though. It typically gives the correct value in cases where the user clicks a link on the last page to navigate to the current page.
But if the user visited the URL directly by typing into the address bar or using a bookmark, document.referrer
will have no value.
![The last page URL can't be displayed for a direct visit.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F08%2Fgif-35.gif&w=3840&q=75)
document.referrer
also won't have a value if the clicked link was marked with the rel="noreferrer"
attribute. Setting rel
to noreferrer
specifically prevents referral information from being passed to the webpage being linked to.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body>
<a href="get-last-page.html">Link</a>
<a href="get-last-page" rel="noreferrer">Link (noreferrer)</a>
</body>
</html>
!["rel=noreferrer" prevents access to referral information](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F08%2Fgif-36.gif&w=3840&q=75)
Navigating to the Last Page
Perhaps you would like to get the last page URL so that you can navigate to that page. You can do this easily with the history.back()
method.
get-last-page.js
...
const backButton = document.getElementById('back');
backButton.onclick = () => {
history.back();
};
get-last-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body>
You visited this page from: <span id="last-page"></span> <br />
<br />
<button id="back">Back</button>
<script src="get-last-page.js"></script>
</body>
</html>
![Navigating to the last visited page.](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F08%2Fgif-37.gif&w=3840&q=75)
See also
- How to Get the Last Part of a URL in JavaScript
- How to Get the Previous Page URL in JavaScript
- How to Get the Current Page URL in React
- How to Get the Last Character of a String in JavaScript
- How to Get the Last N Characters of a String in JavaScript
- How to Get the Last Two Characters of a String in JavaScript