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

Question

我的問題是當我點擊一個鏈接（例如第二頁）它會在屏幕上顯示第二頁。但是當我重新加載頁面時，當前頁面不會被保存並且會恢復到默認頁面。

如何讓所需頁面不刷新到默認頁面？

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

請注意類&我添加的數據頁屬性。此外，我給了一個＃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> 

我還增加了一個模式，BTN類只以該模式中呈現的按鈕。這是爲了處理模態隱藏事件，僅適用於模態中的按鈕。沒有必要在其他鏈接上附加模態（'隱藏'）。

現在在你的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'); 
}); 

因此，我們正試圖擁有一流的節目頁面的每一個元素的click事件綁定。然後單擊我們讀取該特定點擊元素的數據頁面屬性中的內容。然後我們隱藏所有頁面&只顯示持有人被點擊的人。這樣你就不必爲所有按鈕編寫單獨的事件處理程序。

我也在分別處理模態隱藏。

使用會話存儲

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

我們將維持一個變量，將舉行最後一頁用戶是在以前，這樣的事情 - 當用戶嘗試移動到頁面

/* 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)">，你是金色的。