show display：刷新后沒有div

Question

不知道如何正確地提出問題標題！ 我有一個按鈕點擊顯示的div。 問題是，如果用戶轉到下一頁（通過單擊另一個按鈕）然后返回到舊頁面，則不顯示div，因為頁面已刷新，因此用戶需要再次單擊該按鈕才能看到div。

在第一次點擊按鈕后有沒有辦法保持div顯示？

<div id="tableDiv" style="display:none;" >
<table>
   <td>something</td>
</table>
</div>

<input type="button" value="Show" onClick="showTable()"/>

<script type="text/javascript">         
   function showTable() {
       document.getElementById('tableDiv').style.display = "block";
   }                
</script>

Answer 1

你可以使用html5 webStorage：

localStorage不會過期，而在瀏覽器關閉時會刪除sessionStorage （兩者的使用是等效的）。 所有主流瀏覽器都支持webStorage，IE> = 8

簡單的Javascript

function showTable() {
   document.getElementById('tableDiv').style.display = "block";
   localStorage.setItem('show', 'true'); //store state in localStorage
}

並檢查狀態onLoad：

window.onload = function() {
    var show = localStorage.getItem('show');
    if(show === 'true'){
         document.getElementById('tableDiv').style.display = "block";
    }
}

jQuery的

function showTable() {
    $('#tableDiv').show();
    localStorage.setItem('show', 'true'); //store state in localStorage
}

$(document).ready(function(){
    var show = localStorage.getItem('show');
    if(show === 'true'){
        $('#tableDiv').show();
    }
});

演示

PS從localStorage使用中刪除項目

localStorage.removeItem('show');

參考

webStorage

Answer 2

使用localstorage來保存狀態

<script type="text/javascript">         
   function showTable() {
       document.getElementById('tableDiv').style.display = "block";
       localStorage.setItem('showTable', true);  //set flag   
   }

   function hideTable() {
       document.getElementById('tableDiv').style.display = "none";
       localStorage.removeItem('showTable');  //remove key   
   }

   if (localStorage.getItem('showTable')) {  //see if flag is set (returns undefined if not set)
       showTable();   //if set show table
   }
</script>

Answer 3

我認為您最好的選擇是將location.hash用作JavaScript路由器。 基本上修改散列，監視散列更改，如果散列等於特定值做某事。 然后當使用的離開並點擊“返回”時，它們將返回到具有前一個散列的頁面，在這種情況下，您可以檢測它們所在頁面的哪個版本並重新創建它。

<div id="tableDiv" style="display:none;" >
  <table>
    <td>something</td>
  </table>
</div>
<input type="button" value="Show" onClick="showTable()"/>

<script type="text/javascript">
  function showTable(){
    location.hash = "#show"; // sets hash to #show, which will fire onhaschange event which its handler is hashRouter()
  }
  function hashRouter(){
    if(window.hash == "#show"){ // shows table if hash is #show
      document.getElementById('tableDiv').style.display = "block";
    }
  }
  window.onhashchange = hashRouter; // Calls when hash is changed.
  window.onload = hashRouter; // Calls when page loads;
</script>

還有許多其他選項，例如cookie或localstorage。

看看這個插件：

https://github.com/addcms/addHashRouter

使用此解決方案，您可能會執行以下操作：

HTML

<div id="tableDiv" style="display:none;">
  <table>
    <td>something</td>
  </table>
</div>
<a href='#show'>Show Table</a>

JavaScript的

$add.UI.hashRouter.add("show", function(){
    document.getElementById('tableDiv').style.display = "block";
});

然后如果他們在離開頁面后點擊“后退按鈕”它仍會出現，如果他們在顯示表后點擊后退按鈕，它將不會“重新隱藏”它，除非你添加了這個：

HTML

<a href='#hide'>Hide Table</a>

JavaScript的

$add.UI.hashRouter.add("hide", function(){
    document.getElementById('tableDiv').style.display = "none";
});

然后你可以使用瀏覽器導航的顯示/隱藏按鈕。

Answer 4

使用@ DustinPoissant的答案，我做了一些更容易的事情。

您可以使用selector :target來為元素設置樣式，並為您節省一些代碼。

像這樣：

<style>
    #tableDiv {display:none;}
    #tableDiv:target {display:block!important;}
</style>

<div id="tableDiv">
    <table>
        <tr>
            <td>something</td>
        </tr>
    </table>
</div>

<input type="button" value="Show" onClick="showTable()"/>
<input type="button" value="Hide" onClick="hideTable()"/>

<script type="text/javascript">
   function showTable() {
       location.hash='tableDiv';
   }
   function hideTable() {
       location.hash='';
   }
</script>

當地址上的'hash'與該元素的id匹配時， :target選擇器將匹配。

Answer 5

你可以用cookie實現它。 這是一個很好的輕量級jquery cookie插件 。

所以設置一個cookie：

$.cookie("var", "10");

獲取cookie：

$.cookie("var");

刪除cookie：

$.cookie("var", null);

現在你可以這樣做：

function showTable() {
    document.getElementById('tableDiv').style.display = "block";
    $.cookie("var", "1");
}

function leaveButtonOpen(){
    if($.cookie("var") == 1){
        document.getElementById('tableDiv').style.display = "block";
    }
}