I am trying to figure out if there is a way to keep the current, paginated items on the page after refresh/reload, i.e. if I were on the 2nd paginated-section, keep the data after page reload.

So far, I have the list of entries & pagination installed onto the HTML page:

    <div class="blog-entry blog-post" style="display: block;"></div>

    <div class="blog-entry blog-post" style="display: block;"></div>

    <div class="blog-entry blog-post" style="display: block;"></div>

    <div class="blog-entry blog-post" style="display: block;"></div>

    <div class="blog-entry blog-post" style="display: block;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="blog-entry blog-post" style="display: none;"></div>

    <div class="pagination-container">

     <input type="hidden" id="current">

     <input type="hidden" id="show_per_page">

    

     <ul class="pagination blog-pagination" role="navigation" aria-label="Pagination">

      <li><a class="current" href="javascript:showPage(1)" longdesc="1">1</a></li>

      <li><a class="numericButton" href="javascript:showPage(2)" longdesc="2">2</a></li>

      <li><a class="numericButton" href="javascript:showPage(3)" longdesc="3">3</a></li>

      <li><a class="nextbutton" href="javascript:next()">Next »</a></li>

      <li><a class="nextbutton" href="javascript:last(3);">Last »</a></li>

     </ul>

    </div>

The JS for the pagination:

    makePager = function(page){

     var show_per_page = 5;

     var number_of_items = $('.blog-entry').size();

     var number_of_pages = Math.ceil(number_of_items / show_per_page);

     var number_of_pages_todisplay = 5;

     var navigation_html = '';

     var current_page = page;

     var current_link = (number_of_pages_todisplay >= current_page ? 1 : number_of_pages_todisplay + 1);

            

     if (current_page > 1)

      current_link = current_page;

    

      if (current_link != 1) navigation_html += "<li><a class='nextbutton' href=\"javascript:first();\">« Start</a></li><li><a class='nextbutton' href=\"javascript:previous();\">« Prev</a></li>";

    

      if (current_link == number_of_pages - 1) current_link = current_link - 3;

      else if (current_link == number_of_pages) current_link = current_link - 4;

      else if (current_link > 2) current_link = current_link - 2;

      else current_link = 1;

                

      var pages = number_of_pages_todisplay;

      while (pages != 0) {

       if (number_of_pages < current_link) { break; }

       if (current_link >= 1)

        navigation_html += "<li><a class='" + ((current_link == current_page) ? "current" : "numericButton") + "' href=\"javascript:showPage(" + current_link + ")\" longdesc='" + current_link + "'>" + (current_link) + "</a></li>";

        current_link++;

        pages--;

        $('html, body').animate({ scrollTop: 0 }, 0);

      }

                

      if (number_of_pages > current_page){

       navigation_html += "<li><a class='nextbutton' href=\"javascript:next()\">Next »</a></li><li><a class='nextbutton' href=\"javascript:last(" + number_of_pages + ");\">Last »</a></li>";

      }

      $('ul.blog-pagination').html(navigation_html);

    }

          

    var pageSize = 5;

    showPage = function (page) {

     $('.blog-entry').hide();

     $('#current').val(page);

     $('.blog-entry').each(function (n) {

      if (n >= pageSize * (page - 1) && n < pageSize * page)

       $(this).show();

      });

     makePager(page);

    }

           

    showPage(1);

    next = function () {

     new_page = parseInt($('#current').val()) + 1;

     showPage(new_page);

     $('html, body').animate({ scrollTop: 0 }, 0);

    }

    last = function (number_of_pages) {

     new_page = number_of_pages;

     $('#current').val(new_page);

     showPage(new_page);

     $('html, body').animate({ scrollTop: 0 }, 0);

    }

    first = function () {

     var new_page = "1";

     $('#current').val(new_page);

     showPage(new_page);    

     $('html, body').animate({ scrollTop: 0 }, 0);

    }

    previous = function () {

     new_page = parseInt($('#current').val()) - 1;

     $('#current').val(new_page);

     showPage(new_page);

     $('html, body').animate({ scrollTop: 0 }, 0);

    }

I understand that local/sessionStorage methods could alleviate this issue, but I am struggling on how to implement this. Any help on this would be appreciative.