如何在刷新/重新加载时保留当前的分页项？

Question

我试图找出是否有办法在刷新/重新加载后保持页面上的当前分页项目，即如果我在第二个分页部分，请在页面重新加载后保留数据。

到目前为止，我有条目列表＆amp;分页安装在HTML页面上：

<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>

分页的JS：

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);
}

我知道local / sessionStorage方法可以缓解这个问题，但我正在努力解决这个问题。对此的任何帮助都将是值得赞赏的。

编辑：上传测试网站以获取可视化示例。 Click here to view.请注意重新加载页面将始终将您带到第一个分页列表。