Hello all!
I’m a beginner in web development. I’m building a simple small library application for learning purposes that has processes such as:
- The landing page is an main index page with links to people page, books page, etc.
- Suppose the user clicks “books”, it will be redirected to a page with a list of all registered books, let’s call it “books index”.
- The user can edit one of the books or click the “new” link. Both choices will redirect they to “edit-book” page, with a simple form that can be submitted.
- After submission, the user is redirected to the “books index” to edit or add another book.
In summary:
[1: index] -> [2: books index] -> [3: edit book form] -> [4: books index]
In step 4, if the user clicks the “back button” in browser, it is redirected to the form page. If they edited 20 books, they will be redirected to the form page 20 times. It is rather confusing, so I want they to be redirected to the main index page if they are on the books index page.
It seems I cannot just remove things from browser history with Javascript.
Do you have any suggestion? I’m thinking about just adding a “back” button in the page which works differently from the browser button, but it would still add stuff in history, which could make things even more confusing.
Thank you very much.
You can try with location.replace or history.replaceState if you’re not using some framework (i.e. Angular), otherwise they usually have their own way of dealing with this. You could always change the logic of your steps 3 and 4. Someone else could probably add a better answer than this. Sorry for formatting, I’m writing from the phone.
Thanks. It seems these functions are useful in a SPA context? Since I’m reloading every page (I’m using plain HTML for most of this application) these functions seem not to be really useful for the purpose I wrote. Maybe I’m doing something wrong?
Maybe you could preventDefault onclick on the anchor element that links to the form page? You could then use one of those replace functions in that onclick handler. It’ll still be valid HTML this way, functional without JS too