如何保持顯示/隱藏邊欄的設置

Question

我做了一個邊欄，它是爲了顯示所有時間，只有當它被點擊時它纔會隱藏。但是如果我刷新頁面後隱藏了它，它會再次顯示。所以我想保持設置，所以如果用戶隱藏它，它不會出現，直到他按下顯示按鈕無關緊要頁面刷新或他轉到另一個頁面。

（例如像它保持隱藏或顯示不事關了頁面刷新或任何Facebook的右chatbar）

我想在JS的一些變化會做的工作，但林不知道&不是一個編碼器，從而幫助我這樣做。

JS代碼我使用：

<script language=javascript type='text/javascript'> 
function hideDiv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
     document.getElementById('hideShow').style.visibility = 'hidden'; 
    } else { 
     if (document.layers) { // Netscape 4 
      document.hideShow.visibility = 'hidden'; 
     } else { // IE 4 
      document.all.hideShow.style.visibility = 'hidden'; 
     } 
    } 
} 

function showDiv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
     document.getElementById('hideShow').style.visibility = 'visible'; 
    } else { 
     if (document.layers) { // Netscape 4 
      document.hideShow.visibility = 'visible'; 
     } else { // IE 4 
      document.all.hideShow.style.visibility = 'visible'; 
     } 
    } 
} 
</script> 

HTML和CSS

<div id="hideShow" ..etc> 
    My content 
</div> 

，這調用JavaScript來隱藏：

<a href="javascript:hideDiv()">Hide Div</a> 

，這表明它：

<a href="javascript:showDiv()">show Div</a> 

Answer 1

您需要一個javascript類來讀取和寫入cookie。這樣，當用戶與它進行交互時，您可以在Cookie中寫入邊欄的狀態。當頁面加載時，您從Cookie中讀取狀態，並相應地設置可見性。

Answer 2

您需要將條的可見性狀態保存在某個變量中。既然你使用（我假設）只有JS，你可能需要訪問用戶的cookies。

如何在JS設置cookie：http://www.javascripter.net/faq/settinga.htm 如何在JS讀一個Cookie：http://www.javascripter.net/faq/readinga.htm

Answer 3

像這樣的事情！在這裏你有一個函數來讀取cookie，因爲設置一個cookie很容易，但讀取它不多。

readCookie = function (name) { 
     var nameEQ = name + "="; 
     var ca = document.cookie.split(';'); 
     for (var i = 0; i < ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0) == ' ') c = c.substring(1, c.length); 
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); 
     } 
     return "es"; 
    } 

function hideDiv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('hideShow').style.visibility = 'hidden'; 
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.hideShow.visibility = 'hidden'; 
    } 
    else { // IE 4 
    document.all.hideShow.style.visibility = 'hidden'; 
    } 
    } 
document.cookie = 'show=false'; 
} 

function showDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideShow').style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.hideShow.visibility = 'visible'; 
} 
else { // IE 4 
document.all.hideShow.style.visibility = 'visible'; 
} 
} 
document.cookie = 'show=true'; 
} 

if(readCookie('show') == "true"){ 
showDiv(); 
} 
else { 
hideDiv(); 
} 

好運