如何在頁面刷新時保留 javascript/jquery 對 DOM 所做的更改

Question

我的問題是當我點擊一個鏈接（例如Second 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

當您使用 javascript 更改 DOM 的狀態時，它將在頁面重新加載時重置為實際狀態。 如果您希望能夠存儲此狀態並在重新加載時以相同狀態顯示 DOM，則必須使用localStorage 或 sessionStorage 。 在這種情況下，我將使用 sessionStorage 向您展示如何做到這一點。 您可以在此處閱讀差異 - http://www.w3schools.com/html/html5_webstorage.asp

工作示例

如何實現這一點的完整工作示例在這里 - http://codepen.io/nitishdhar/pen/DGHkw

您可以切換到某個頁面，然后刷新瀏覽器窗口，它只會停留在該頁面上。

詳細說明

首先，您處理節目的方式可以像這樣改進-

您只需將一個通用類添加到您希望頁面更改事件觸發的所有鏈接/按鈕中，並在其中存儲數據屬性，定義單擊時應打開哪個頁面，如下所示 -

對於鏈接

<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>

注意我添加的 class & data-page 屬性。 我還給href 加了一個#，這樣你就不必在點擊事件時返回false。 你也可以使用 javascript:void(0); 而不是 # 如果你不希望你的窗口哈希得到更新。

對於按鈕也

<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>

我還僅向在模態內呈現的按鈕添加了一個 modal-btn 類。 這是為了僅處理模態中的按鈕的模態隱藏事件。 沒有必要將 modal('hide') 附加到其他鏈接。

現在在你的 javascript 中讓它工作，你會做這樣的事情 -

$('.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');
});

所以我們試圖綁定每個具有類 show-page 的元素的點擊事件。 然后點擊我們讀取特定點擊元素的數據頁面屬性中的內容。 然后我們隱藏所有頁面並僅顯示其持有人被點擊的頁面。 這樣您就不必為所有按鈕編寫單獨的事件處理程序。

我也在單獨處理模態的隱藏。

使用會話存儲

現在會話存儲是瀏覽器存儲，它將為您保存當前會話的一些數據，即直到用戶關閉瀏覽器窗口。

我們將維護一個變量來保存用戶之前所在的最后一頁，就像這樣 -

/* 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);
}

現在，在用戶嘗試移動到頁面時的點擊事件中，我們將不斷更新會話變量“pageToShow”，如下所示 -

$('.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);
    }
});

現在，如果用戶也刷新頁面，我們將首先檢查是否在會話中設置了 pageToShow，如果設置了，我們將移動到該頁面，就像您想要的那樣。

注意：如果您希望 pageToShow 變量在用戶關閉並稍后重新打開瀏覽器后保持不變，您可以使用 localStorage 而不是 sesstionStorage。

Answer 2

將所有內容都設置為<a href="javascript:void(0)"> ，您就大功告成了。