javascript - 在页面刷新时保存 html 页面的状态

就像我在其他问题中提到的，我正在构建自己的网络应用程序。

现在我有了这个应用程序 --> 这是 Plunker !你可以在这里看得更清楚。我在标题中有一个选项卡，我可以浏览多个页面并加载其内容。

<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script src="script.js"></script>
  </head>
<body>
  <a href="link1">Link 1</a>
  <a href="link2">Link 2</a>
 <div id="content">
   <!-- Page content displays here --> 
 </div> 
</body>
</html>

$(document).ready(function(){ 
 $('a').click(function(e){
  var page = $(this).attr('href');   
  $('#content').load(page + '.html');   
  return false; // don't follow the link
 }); 
});

一切正常!但是我在保存页面状态时遇到了问题。

例如，如果我在第 2 页并刷新浏览器，该页面将返回到其开始状态。我怎样才能在刷新时停留在当前页面。

我非常感谢每一个解决方案或提示!

最佳答案

您必须利用浏览器的 History API .在每次内容加载时，您都必须将状态推送到历史记录。

在硬刷新时，您必须解析 url 并获取正确的内容。

使用这种方法要牢记的一件事是，您必须克服重重困难，以便搜索引擎抓取工具能够轻松地将您的所有“页面”编入索引。

另一种方法是使用 Turbolinks .

干杯。

关于javascript - 在页面刷新时保存 html 页面的状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49581318/