How to keep the changes made to DOM by javascript/jquery on page refresh

Question

My problem is when I click a link (example Second Page) it will display a second page on screen. But when I reload the page, the current page is not saved and it revert to the default page.

How do I keep the desired page from refreshing to the default page?

JavaScript:

<script type="text/javascript"> 
    $(function(){
        $('.one').show();
        $('.two').hide();
        $('.three').hide();
        $('#show_one, #show_one1').click(function(){
            $('.one').show();
            $('.two').hide();
            $('.three').hide();
            $('.modal').modal('hide');
            return false;
        });
        $('#show_two, #show_two2').click(function(){
            $('.one').hide();
            $('.two').show();
            $('.three').hide();
            $('.modal').modal('hide');
            return false;
        });
        $('#show_three, #show_three3').click(function(){
            $('.one').hide();
            $('.two').hide();
            $('.three').show();
            $('.modal').modal('hide');
            return false;
        });
    });
</script>

HTML:

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="" id="show_one"> One</a></li>
                <li><a href="" id="show_two"> Two</a></li>
                <li><a href="" id="show_three"> Three</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>
            </ul>
        </div>
        </div>
    </nav>


<div class="container">
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" id="show_one1" class="btn btn-info" data-dismiss="modal" aria-hidden="true">One</button>
                                            <button type="button" id="show_two2" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Two</button>
                                            <button type="button" id="show_three3" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Three</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
</div>

<div class="container">
        <div class="one">
            <div class="row">
                <center>
                    Page 1
                </center>
             </div>
        </div>
        <div class="two">
            <div class="row">
                <center>
                    Page 2
                </center>
             </div>
        </div>
        <div class="three">
            <div class="row">
                <center>
                    Page 3
                </center>
             </div>
        </div>
</div>

Answer 1

When you change the state of your DOM using javascript, it will reset to the actual state on page reload. If you want to be able to store this state & present the DOM in the same state on reload, you will have to use either localStorage or sessionStorage. In this case I will use sessionStorage to show you how this can be done. You can read about the difference here - http://www.w3schools.com/html/html5_webstorage.asp

Working Example

A full working example of how this can be achieved is here - http://codepen.io/nitishdhar/pen/DGHkw

You can switch to some page & then refresh your browser window & it will stay on that page only.

Detailed Explanation

First of all the way you are handling the show can be improved like this -

You can just add one common class to all the links/buttons from which you want the page change event to trigger & store a data attribute in them defining which page they should open if clicked, something like this -

For Links

<li><a href="#" class="show-page" data-page="one"> One</a></li>
<li><a href="#" class="show-page" data-page="two"> Two</a></li>
<li><a href="#" class="show-page" data-page="three"> Three</a></li>

Notice the class & data-page attribute I added. Also I gave a # to the href, this way you won't have to return false on click event. You may also use javascript:void(0); instead of # if you don't want your window hash to get updated.

For buttons also

<button type="button" class="btn btn-info show-page modal-btn" data-page="one" data-dismiss="modal" aria-hidden="true">One</button>
<button type="button" class="btn btn-info show-page modal-btn" data-page="two" data-dismiss="modal" aria-hidden="true">Two</button>
<button type="button" class="btn btn-info show-page modal-btn" data-page="three" data-dismiss="modal" aria-hidden="true">Three</button>

I have also added a modal-btn class only to the buttons that render inside the modal. This is to handle the modal hide event only for the buttons that are in the modal. It is unnecessary to attach modal('hide') to the other links.

Now in your javascript to make it work, you will do something like this -

$('.show-page').click(function(){
   /* Get the Page to Show */
   var pageToShow = $(this).data('page');
   /* Hide all pages first */
    $('.page').addClass('hide');
   /* Show the page whose link was clicked */
    $('.' + pageToShow).removeClass('hide');
 });

$('.modal-btn').click(function() {
    $('.modal').modal('hide');
});

So we are trying to bind the click event of every element that has class show-page. Then on click we read what's in that specific clicked element's data-page attribute. Then we hide all pages & show only the one whose holder was clicked. This way you don't have to write separate event handlers for all buttons.

I am also handling hiding of modal separately.

Using Session Storage

Now session storage is browser storage that will hold some data for you for the current session i.e until user closes the browser window.

We will maintain a variable that will hold the last page user was at before, something like this -

/* Check if session has some page to show stored */
if(typeof(Storage)!== "undefined" && sessionStorage.getItem('pageToShow')) {
    var pageToShow = sessionStorage.getItem('pageToShow');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
    /* Also set this page to session storage */
     sessionStorage.setItem('pageToShow', pageToShow);
}

Now on click events when user tries to move to a page, we will keep updating the session variable 'pageToShow', something like this -

$('.show-page').click(function(){
    /* Get the Page to Show */
    var pageToShow = $(this).data('page');
    /* Hide all pages first */
     $('.page').addClass('hide');
    /* Show the page whose link was clicked */
     $('.' + pageToShow).removeClass('hide');
     if(typeof(Storage)!=="undefined") {
        sessionStorage.setItem('pageToShow', pageToShow);
    }
});

Now if user refreshes the page also, we will first check if we have a pageToShow set in session & if we do, we will move to that page, just like you wanted.

Note: You can use localStorage instead of sesstionStorage if you want the pageToShow variable to stay even after user closes & reopens the browser later.