Question

我正在使用ajax的分页。如果用户点击第3，那么我将使用ajax打开第三页。

如果从该页面开始，我会转到另一个页面＆amp;点击浏览器后退按钮，然后第3页不打开。它正在打开第1页。

那么如果用户点击后退按钮

，我怎么能打开第3页

Answer 1

您可以在现代浏览器中使用hash（或pushState方法）来“保存”最后一个分页状态。加载数据时，请从hash。

中获取页面

这是原始示例。你可以看到，如果你点击链接移动到另一个页面，然后你回头（使用后退按钮或其他），它会显示预览项目。

如何运作？

每当您点击链接时，请说出第一个链接，即href属性为#1，事件hashchange被触发。现在，您可以使用hash（location.hash方法用于删除replace符号）来阅读#的值。现在，如果您点击第二个链接，然后点击返回再次触发hashchage事件，依此类推..

// set data
var data = [],
    numOfPages = 5;

for (var i = 0; i < numOfPages; i++) {
  data.push([1 + '' + i, 2 + '' + i, 3 + '' + i, 4 + '' + i, 5 + '' + i]);
}

// paging method
var list = document.querySelector('ul');
function getPage(pageNum) {
  !pageNum && (pageNum = 0);
  var html = '';
  for (var i = 0; i < data[pageNum].length; i++) {
    html += ('<li>' + data[pageNum][i] + '</li>');
  }
  list.innerHTML = html;
}

getPage();

// generate pageing buttons
var paging = document.querySelector('#paging'),
    pagingHTML = '';

for (var i = 0; i < data.length; i++) {
  pagingHTML += ('<a href="#' + i +'">' + i + '</a>');
}

paging.innerHTML = pagingHTML;

// listen to changes in the hash
window.addEventListener('hashchange', function() {
  var pageIndex = location.hash.replace('#', '');
  getPage(pageIndex);
});

a {
  display:inline-block;
  margin-left: 10px;
}

<ul></ul>
<div id="paging"></div>

Answer 2

我已使用html5本地存储解决了这个问题。

当使用点击任何页面然后该页面没有时，我存储在本地存储中。因此，如果用户转到另一个页面＆amp;点击后退按钮，然后我点击了最后一页，点击了＆amp;我正在收到那些记录。

因此，通过使用本地存储，问题得以解决。

获取ajax＆amp; amp;使用的最后一个重定向网址如果用户单击浏览器后退按钮，则打开它

2 个答案: