How to return page state after return?

Question

JavaScript

So there is a page with products. There is a "show more" button. When you click on this button, ajax loads the products of the second page and merges them with the first one.

We go to the product, go back and we are again on the first page, everything that we loaded before was not saved.

How to solve it?

Answer 1

History API to learn and use.

Answer 2

1. On page 1, load new products and add their list
2. Change the page url to a new one (it is important that the server can return a new list of products when going to this url)
3. Record this transition in the history.
4. Everything! Now you can click on the product and go back.