Question

我正在创建一个应用程序，允许用户在页面A上执行某些操作。但是，我想要包含一个将他链接到页面B的功能，并且在完成B上的活动后，将他链接回到A页面A机智进步。目前，在链接到页面B然后返回到A之后，页面A上的所有进度都消失了，然后又回到0.如何实现？

Answer 1

一个简单的 SPA实施跟随#hash更改，

＆＃13;

$(window).on('hashchange', routePage);

function routePage() {
  var pageName = (window.location.hash) ? window.location.hash : "#page1";
  $('div.pages').hide(); // Hide all pages
  $(pageName).show();    // Show the current page 

  /* switch for page specific functions, not used now */
  switch(pageName) {
    case '#page1':
      alert('Go to Page1');
      break;
    case '#page2':
      alert('Go to Page2');
      break;
  }
}

＆＃13;

div.pages *{
  display: block;
  margin: 10px;
}
div.pages a, div.pages h4 {
  padding: 5px;
  text-align: center;
  background: lightgray;
}	
div.pages a{
  text-decoration: none;
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- First Page -->
<div id="page1" class="pages">
      <h4>Post your comment</h4>
      <input type="text" name="name" placeholder="Your Name" />
      <textarea name="comments" placeholder="Your comments"></textarea>
      <a href="#page2">Submit</a>
</div>  
<!--Second Page-->
<div id="page2" class="pages" style="display:none;">
      <b>Success!</b>
      <p>Your comments will be published soon...</p>
      <a href="#page1">Edit your comment</a> 
</div>

＆＃13;

有关使用 JavaScript框架的详细SPA实施，请结帐TodoMVC

http://todomvc.com/

Answer 2

您可以使用会话或本地存储等任何存储机制从页面A保存数据，无论您做什么都可以。当您从B页返回时，您可以预先填写所有数据。完成此过程后，您可以从存储中删除数据。

具有散列更改的简单SPA（单页应用程序）实现

2 个答案: