Infinite list: after “Go back” to the list, the new elements are not there any more. How to restore them?

Infinite list: after “Go back” to the list, the new elements are not there any more. How to restore them?

Im using AJAX to make an infinite list of elements (products). When I go to another page far from the list, and then "Go back" using the browser to the list page, the products added while scrolling down are not anymore there..

My question: after "Go back", how to show the products again (even those added while scrolling down)?

I thought in these two options:

Option 1 : restore them in some way since they were already shown in the client. In other words, they already are in the user's computer. is this possible???

Option 2: make another AJAX request to restore the products.

This is the kind of AJAX request Im using to get the products while scrolling down:

  1.       <a href="{{ path('product1') }}">product 1</a>
  2.       <a href="{{ path('product2') }}">product 2</a>
  3.       <a class="get-products" href="#">Get more products</a>
  4.    
  5.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  6.       <script type="text/javascript">
  7.         $('.get-products').on('click',function() {
  8.           event.preventDefault();
  9.           $.ajax({
  10.             type: 'GET',
  11.             url: 'http://procom/app_dev.php/get-more-products',
  12.             success: function(response) {
  13.               $('body').prepend(response);
  14.             }
  15.           });
  16.         });
  17.       </script>