How To Get The Previous Page Url Using Javascript Duplicate

Imagine you're working on a web project, and you need to get the URL of the previous page your users visited using JavaScript. This can be a handy feature in various situations, like tracking user navigation or creating a custom "back" button. In this guide, we'll walk you through a simple solution to achieve this using JavaScript.

To get the previous page URL, we'll leverage the `document.referrer` property. This property returns the URL of the previous page that linked to the current page. However, it's essential to note that the referrer might not always be accurate due to security and privacy policies in modern browsers.

Here's a straightforward JavaScript function that retrieves the previous page URL:

function getPreviousPageUrl() {
  return document.referrer;
}

By calling the `getPreviousPageUrl()` function in your JavaScript code, you can access the URL of the previous page. Remember to handle cases where the referrer might be empty or null, as it could happen when the user navigates directly to the page or due to browser settings.

If you need a more robust solution or want to customize the behavior further, you can combine JavaScript with browser history management. By storing the URLs in an array or using the `history` object, you can create a history of visited pages within your web application.

For example, the following code snippet demonstrates how you can store and manage the history of visited URLs:

let pageHistory = [];

function addToHistory(url) {
  pageHistory.push(url);
}

function getPreviousPageUrl() {
  return pageHistory.pop() || document.referrer || '/';
}

// Usage example
addToHistory(window.location.href);

console.log(getPreviousPageUrl());

In this enhanced approach, the `addToHistory()` function adds the current page URL to an array, simulating a history stack. Then, the `getPreviousPageUrl()` function first checks the stored history and falls back to the referrer as needed.

Remember that browser history management in JavaScript is a powerful tool that allows you to create custom navigation behaviors and enhance user experience on your website or web application.

As a final tip, keep in mind that accessing the referrer property might be restricted in certain contexts, such as when your website is loaded over HTTPS or from an iframe. Always test your code thoroughly and consider the security implications of accessing sensitive information like URLs.

By following these steps and understanding how to retrieve the previous page URL using JavaScript, you can enhance the functionality of your web projects and provide a smoother user experience for your visitors.