Description

get the previous page url in javascript ?

### How to Get the Previous Page URL in JavaScript

When developing web applications, especially single-page applications (SPA) or web apps that heavily rely on routing and navigation, one often needs to know the URL of the page a user came from. This can be very useful in situations where you need to keep track of user navigation, facilitate backtracking, or simply log user behavior on your site. Here’s how you can achieve this using JavaScript.

#### Using `document.referrer`

One of the simplest and most straightforward ways to get the URL of the previous page is by using the `document.referrer` property. This property in JavaScript holds the URL of the document that linked to the current page. Here’s a basic example:

“`javascript
let lastPageUrl = document.referrer;
console.log(`Last visited page URL is ${lastPageUrl}`);
“`

However, it’s important to note that this might not always give you the most accurate results. `document.referrer` will not be set if the user navigated to the page through a direct link, refreshed the page via F5 or browser’s refresh button, or if the referrer header was explicitly dropped by the serving server.

#### JavaScript History API

If you are looking to navigate the user to the previous page rather than just fetching its URL, you can leverage the History API in JavaScript.

“`javascript
history.back(); // Go to the previous page

// Or if you just want to simulate a step back without reloading:
history.go(-1);
“`

However, to directly get the URL of the previous page from the History API is not directly supported. The API doesn’t provide a direct method to check the URL of the previous page from the navigation stack. But you can keep track of URLs in your application by pushing them manually to the session storage, for example:

“`javascript
sessionStorage.setItem(‘lastUrl’, window.location.href);
window.history.pushState({}, ”, ‘/new/page/path’);

// Then on subsequent pages
let lastUrl = sessionStorage.getItem(‘lastUrl’);
console.log(`Previous URL: ${lastUrl}`);
“`

#### Pros and Cons

– **Simple to Implement:** `document.referrer` is very easy to implement. Practically, just fetching a single property will do the job in most basic scenarios.
– **Limitation in Accuracy:** It will not work reliably for all back or direct accesses. The document referrer will only have meaning if there is a back reference and it is not blocked by the previous page.
– **Full Control Over Navigation:** The History API offers a lot more control over how you navigate through your application, however, it lacks the ability to directly fetch the URL of previous pages in the stack.

In summary, the method you choose will depend largely on the specific requirements of your application. Ensure to test each method in different contexts (e.g., navigating directly to your page, refreshing the page, and using back or forward navigation) to understand how it behaves and whether it fits your needs.

I hope this guide helps you to navigate through the different techniques for fetching the URL of the previous page in JavaScript.