刷新页面时保存HTML页面状态

Question

刷新页面时保存HTML页面状态

3

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

现在我有了这个应用程序--> 这里是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页并刷新浏览器，则页面将返回其起始状态。如何让页面在刷新时停留在当前页。

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

- Basch

你可能会发现添加和修改历史记录条目很有用。还可以参考在不重新加载页面的情况下修改URL。 - showdev

如果您不担心链接到特定部分，而只是想保存当前页面以进行刷新，另一个想法可能就是将page变量保存在会话/本地存储、cookie或服务器端会话中。 - showdev

1个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Mladen Ilić · Accepted Answer

你需要利用浏览器的历史API。在每次内容加载时，你需要将状态推送到历史记录中。在硬刷新时，你需要解析URL并获取正确的内容。使用这种方法需要注意的一点是，你必须费尽周折地使搜索引擎爬虫能够索引所有“页面”。另一种方法是使用Turbolinks。干杯。