Luke Tan Luke Tan - 1 year ago 95
Javascript Question

How to implement Simple Single Page Application (SPA) and change window.location maintaining JS data?

I am making an app which lets a user do something on page A. However, I want to include a function which links him to page B, and after completing the activity on B, links him back to A with his page A progress in tact. Currently, after linking to page B and then back to A, all of the progress on page A is gone and back to 0. How would this be accomplished?

Answer Source

Sample SPA implementation with location change using hash follows,

$(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 specified on hash
div *{
a {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: initial;
    width: 150px;
    margin: 5px;
<script src=""></script>
<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 id="page2" class="pages" style="display:none;">
      <h4>Success! Your comments will be published soon</h4>
      <a href="#page1">Edit your comment</a> 

For more detailed one, you can check Todo MVC

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download