Retain the previous page when the URL is manually updated using $location

My controller has a function that changes the browser's URL, but I'm struggling to maintain the original previous page when the user navigates back.

Here's an example:

Let's say a user is on /home and then moves to /article1. As they scroll through the page, I update the URL to /article2 using:

$location.path('article2');

However, when the user hits the back button while on /article2, the URL switches back to /article1, when I actually want to redirect them to /home.

I've tried the following code:

var previousPage = document.referrer; // Get the previous location on page load
history.pushState({}, '', previousPage); // Alter the history by adding the previous page

But this method doesn't work because the history state is automatically changed when updating the URL using $location.

Is there a way to preserve the navigation as intended?

javascriptangularjsbrowser-history

Answer №1

You have the option to utilize this method:

window.onpopstate = () => history.replaceState(history.state, 'gotohome', '/')

This approach is effective, however, I am curious if there is a way to modify the URL of the previous page without relying on window.onpopstate. If anyone has insight into this matter, please assist me.

Answer №2

One useful feature is storing the previous page locally for easy navigation back. In one of my apps, I implemented a back button that takes you back to the last visited page. Here's a snippet of how you can achieve this:

localStorage.setItem('previousPage', 'mypage');

function navigateBack(){
 window.location.href = localStorage.getItem('previousPage');
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sequelize Error: The WHERE parameter for 'email' is throwing an error due to an invalid value of 'undefined'

Currently, as part of my Node.js application, I am using Sequelize to develop a user registration feature. However, I seem to be facing an issue when attempting to verify the existence of a user based on their email address. The error that keeps popping up ...

javascriptexpressormsequelize.js

SSL-enabled Websocket server powered by websocket.io

I have built a basic Websocket server using node.js and websocket.io var ws = require('websocket.io') , server = ws.listen(8000); server.on('connection', function (socket) { console.log("connected"); socket.on('message&ap ...

javascriptnode.jssslwebsocketcertificate

update and rejuvenate session information using Node.js and express-session

Currently, I am working with Node.js in conjunction with express-session. Within my codebase, there is session data containing user information. req.session.user Upon updating the user's information, I update the session with the new data and then r ...

javascriptnode.jssession

Discover the power of AngularJS dashboard templates

What is the best way to utilize free AngularJS Dashboard Templates that are available online? I have come across a variety of free angular dashboard templates. While they seem appealing, I am struggling to find detailed instructions on how to implement t ...

angularjs

Group by month and calculate the total sum using mongoose in MongoDB

I'm currently working with the orderdetails model in my project. Here is a snippet of the schema: const model = new Schema( { district: { type: String }, category: String, producer: String, variety: String, qty: String, price ...

javascriptnode.jsmongodbmongoose

The authorization process for uploading data to Azure Data Lake Gen2

Currently, I am working on generating a Shared Access Signature (SAS) client-side within my Node.js application. The primary goal is to allow users to directly upload files to my Azure Data Lake Gen2 Blob Storage container without streaming them through th ...

javascriptnode.jsazure-data-lake-gen2

Issue with Material UI Textfield functionality on mobile Safari browser

UPDATE: Resolved the problem by including this code in index.css input { -webkit-user-select:text;} In my application, I am using a Material UI box that contains text fields with an onChange handler. While the TextFields function correctly on most bro ...

javascriptreactjsmaterial-ui

Ways to extract output from another file's standard output?

Take this scenario for instance, Consider having the following code snippet in a file labeled main.js: function main(){ console.log(5); } Now, imagine another file where you aim to extract the stdout from main.js. Presently, your code looks like t ...

javascriptnode.jsfilestreamstdio

Ways to optimize angular performance by minimizing unnecessary data binding:NSUTF8B

When comparing the performance of rendering a list using Angular versus other libraries like Handlebars, I noticed about a 10x decrease in speed. In my case, the table does not need to update dynamically when the model changes. If necessary, I can simply ...

javascriptangularjs

Validation of a multi-step form ensures that each step is filled out

I'm completely new to Angular and I'm attempting to implement validation in my form. The form structure was not created by me and is as follows: <div> <div ng-switch="step"> <div ng-switch-when="1"> < ...

javascriptangularjsformsvalidationangularjs-controller

Does the size of a JavaScript heap, when it's big but not enough to cause a crash, have the potential to slow down a website, aside from just having an

Utilizing angular material dialog, I have incorporated a mat stepper with three tables (one per step), where one or two of them may contain an extensive amount of records. I have already integrated virtual scrolling to improve performance. However, when ...

javascripthtmlangularfrontend

having difficulties retrieving the attribute value through jquery

I'm currently implementing this method on rowmouseevent. When I use $get(eventArgs.get_id()), the output is: <tr class="normal" data-value="normal" id="ctl00_ContentPlaceHolder1_UserGrid_grdusergrid_ctl00__0" style="height:30px;" /tr> How can ...

javascriptjquery

Regular expression: Strip the brackets from a portion of the text

I have a JavaScript application where I need to manipulate strings. The text follows this structure: It might begin with a prefix in square brackets [prefix]. I have to preserve this prefix with the brackets. Next comes [whatever string], in this case I ...

javascriptregexstring

What is the method for transforming a regular expression into every conceivable scenario?

transform a regular expression into all potential combinations For Instance: If the input is 1.9856[1-4], it should generate values like 98561, 98562, 98563, 98564 If the input is 2.98[4-5]65, it should output values 98465, 98565 ...

javascriptnode.js

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

javascriptcssreactjsd3.js

sorting an array using key and value criteria

How can I use Underscore.js to filter an array based on a specific key and value? Currently, my code searches for all fields' values, but I only want to search based on the key and value. Can you provide guidance on how to achieve this using Underscor ...

javascriptarraysunderscore.js

What is the correct way to retrieve a JSON object instead of getting [Object object]?

Creating a basic web scraper integrated with mongoDB. Even though the API returns the JSON object in the correct format, when trying to append it to a bootstrap card on the page, I'm getting [Object object]. Below is my JavaScript code running on th ...

javascriptjqueryhtmljson

Is there a way to retrieve information from all pages of a table on a webpage using Chrome?

On a webpage, I have a table containing 100 rows that are displayed 20 at a time. By clicking "next page," I can view the following set of 20 rows and the table view is updated accordingly. I am able to access the data for each batch of 20 rows using dev ...

javascripthtml

Using highlights in an external template does not function as expected

I am new to using AngularJS and I have encountered a problem. I am currently incorporating Prism.js or Highlight.js into my website (same result). It works perfectly in index.html, but it doesn't seem to work in other templates that are loaded with n ...

angularjsprism.js

Instead of using setTimeout in useEffect to wait for props, opt for an alternative

Looking for a more efficient alternative to using setTimeout in conjunction with props and the useEffect() hook. Currently, the code is functional: const sessionCookie = getCookie('_session'); const { verifiedEmail } = props.credentials; const [l ...

javascriptreactjs