在手动页面刷新时维护通过 AJAX 加载的状态/内容答案

【问题标题】：Maintaining state/content loaded in via AJAX on manual page refresh在手动页面刷新时维护通过 AJAX 加载的状态/内容
【发布时间】：2013-12-05 20:44:23
【问题描述】：

此 jQuery/History.js 代码适用于通过 Ajax 加载内容，方法是单击链接并在浏览器中向后/向前导航，但在手动页面刷新时，历史堆栈/日志会丢失，而不仅仅是加载相同我之前加载的内容得到了实际的 .erb 文件并丢失了页面的样式/格式。

$(function(){
  $('.nav-bar li a').on('click', function(event){
    var urlPath = $(this).attr('href');
    // not implemeneted
    var title = urlPath.capitalize();

    loadContent(urlPath);

    // pushes the current page state onto the history stack, and changes the URL
    History.pushState('', null, urlPath);
    event.preventDefault();
  });



  // This event makes sure that the back/forward buttons work too
  window.onpopstate = function(event){
    console.log("pathname: " + location.pathname);
    loadContent(location.pathname);
  };
});

function loadContent(url){
  // Uses jQuery to load the content
  $('#content').load(url+'#content', function(){
    console.log("Ajax success"); // Ajax

    // bxSlider image slider
    $('.bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      captions: true
    });
  });
}

String.prototype.capitalize = function(){
  // add capitalize to string - uppercase the first character, add it to the rest of the  word 
  return this.charAt(0).toUpperCase() + this.slice(1);
}

如何在手动页面刷新期间保留数据/历史记录？我尝试将当前 html 设置为一个变量并将其作为 JSON 对象传递给 pushState() 中的第一个参数，但我相信我可能做错了。实现这一点的最佳方法是什么？此外，window.onpopstate 函数不会在手动页面刷新时运行，所以我不确定如何访问对象并获取数据。

我不确定这有多相关...但我正在 Sinatra 中运行此应用程序

我的布局.erb

   <!DOCTYPE html>
    <html>
    <head>
    <title>/title>

    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"  rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script  src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js">  </script>

   <script src="/js/jquery.bxslider.js"></script>
   <script src="/js/jquery.bxslider.min.js"></script>
   <link href="/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />

   <script src="/js/application.js"></script>
   <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
   </head>

  <body>
   <nav class="nav-bar">
    <ul>
      <li><a href="/" id="nav-bar">Home</a></li>
      <li><a href="about" id="nav-bar">About</a></li>
      <li><a href="portfolio" id="nav-bar">Portfolio</a></li>
      <li><a href="resume" id="nav-bar">Resume</a></li>
    </ul>
  </nav>
    <%= yield %>
  </body>

我的 .erb 视图的其余部分由一个 div 组成，其中包含一个内容 ID 和其他 HTML 标记。此外，当 ajax 调用工作时，它似乎会在 ajax 成功后附加一个带有内容 ID 的第二个 div。我该如何预防？

TL;DR

如何通过手动刷新来保持页面状态，而不是在实际视图中加载并丢失格式/样式。

【问题讨论】：

标签： javascript jquery html ajax sinatra

【解决方案1】：

你已经定义了

   // This event makes sure that the back/forward buttons work too
   window.onpopstate = function(event){
     console.log("pathname: " + location.pathname);
     loadContent(location.pathname);
   };

在 jQuery 块内：

 $(function(){
   ...
 )

这会强制它在文档加载后运行，因此直到第一个 popstate 事件发生后才定义它。

【讨论】：

【解决方案2】：

您可以使用localStorage，在第一页存储您的数据，然后在任何其他页面再次获取您的数据。

【讨论】：