How to get the previous URL in JavaScript?

Viewed 632610

Is there any way to get the previous URL in JavaScript? Something like this:

alert("previous url is: " + window.history.previous.href);

Is there something like that? Or should I just store it in a cookie? I only need to know so I can do transitions from the previous URL to the current URL without anchors and all that.

9 Answers

If you are writing a web app or single page application (SPA) where routing takes place in the app/browser rather than a round-trip to the server, you can do the following:

window.history.pushState({ prevUrl: window.location.href }, null, "/new/path/in/your/app")

Then, in your new route, you can do the following to retrieve the previous URL:

window.history.state.prevUrl // your previous url

If anyone is coming from React-world, I ended up solving my use-case using a combination of history-library, useEffect and localStorage

When user selects new project:

  function selectProject(customer_id: string, project_id: string){
    const projectUrl = `/customer/${customer_id}/project/${project_id}`
    localStorage.setItem("selected-project", projectUrl)
    history.push(projectUrl)
  }

When user comes back from another website. If there's something in localStorage, send him there.

  useEffect(() => {
    const projectUrl = localStorage.getItem("selected-project")
    if (projectUrl) {
      history.push(projectUrl)
    }
  }, [history])

When user has exited a project, empty localStorage

  const selectProject = () => {
    localStorage.removeItem("selected-project")
    history.push("/")
  }

Those of you using Node.js and Express can set a session cookie that will remember the current page URL, thus allowing you to check the referrer on the next page load. Here's an example that uses the express-session middleware:

//Add me after the express-session middleware    
app.use((req, res, next) => {
    req.session.referrer = req.protocol + '://' + req.get('host') + req.originalUrl;
    next();
});

You can then check for the existance of a referrer cookie like so:

if ( req.session.referrer ) console.log(req.session.referrer);

Do not assume that a referrer cookie always exists with this method as it will not be available on instances where the previous URL was another website, the session was cleaned or was just created (first-time website load).

I had the same issue on a SPA Single Page App, the easiest way I solved this issue was with local storage as follows:

I stored the url I needed in local storage

useEffect(() => {
const pathname = window.location.href; //this gives me current Url
localstorage.setItem('pageUrl',JSON.stringify(pathname))
}, []);

On the next screen (or few screens later) I fetched the url can replaced it as follows

useEffect(() => {
     const pathname = localstorage.getItem('pageUrl');
     return pathname ? JSON.parse(pathname) : ''
     window.location.href = pathname; //this takes prevUrl from local storage and sets it
}, []);

try this one : this.service.getWindow().history.back();

Related