設置Cookie記憶隱藏元素狀態

Question

我無法設置cookie記住某些元素是否已隱藏或不。我使用的腳本（來自這裏的另一個答案）似乎在隱藏或顯示我想要控制的元素方面起作用，但似乎並沒有按照'記住'當前狀態的方式工作重新加載/更改頁面時。

在我目前正在開發的網站，只有兩頁目前有這樣的代碼：

http://www.emelisandetribute.com/music.php和http://www.emelisandetribute.com/videos.php

在頁面上（直接在標籤之前）使用的JavaScript如下：

<script type="text/javascript"> 
function setCookie (name, value, expires, path, domain, secure) { 
    document.cookie = name + "=" + escape(value) + 
    ((expires) ? "; expires=" + expires : "") + 
    ((path) ? "; path=" + path : "") + 
    ((domain) ? "; domain=" + domain : "") + 
    ((secure) ? "; secure" : ""); 
} 
function getCookie (name) { 
    var cookie = " " + document.cookie; 
    var search = " " + name + "="; 
    var setStr = null; 
    var offset = 0; 
    var end = 0; 
    if (cookie.length > 0) { 
     offset = cookie.indexOf(search); 
     if (offset != -1) { 
      offset += search.length; 
      end = cookie.indexOf(";", offset); 
      if (end == -1) { 
       end = cookie.length; 
      } 
      setStr = unescape(cookie.substring(offset, end)); 
     } 
    } 
    if (setStr == 'false') { 
     setStr = false; 
    } 
    if (setStr == 'true') { 
     setStr = true; 
    } 
    if (setStr == 'null') { 
     setStr = null; 
    } 
    return(setStr); 
} 
function hideFooter() { 
    setCookie('footer_state', false); 
    document.getElementById('toggleoff').style.display = 'none'; 
    document.getElementById('toggleon').style.display = 'block'; 
    document.getElementById('footer1').style.display = 'none'; 
    document.getElementById('footer2').style.display = 'none'; 
    document.getElementById('footer3').style.display = 'none'; 
} 
function showFooter() { 
    setCookie('footer_state', null); 
    document.getElementById('toggleoff').style.display = 'block'; 
    document.getElementById('toggleon').style.display = 'none'; 
    document.getElementById('footer1').style.display = 'block'; 
    document.getElementById('footer2').style.display = 'block'; 
    document.getElementById('footer3').style.display = 'block'; 
} 
function checkFooter() { 
    if (getCookie('footer_state') == null) { // if popup was not closed 
     document.getElementById('toggleoff').style.display = 'block'; 
     document.getElementById('toggleon').style.display = 'none'; 
     document.getElementById('footer1').style.display = 'block'; 
     document.getElementById('footer2').style.display = 'block'; 
     document.getElementById('footer3').style.display = 'block'; 
    } 
} 
</script> 

的相關元素的HTML是：

<div class="mainfooterwrapper"> 
    <span class="mainfootertoggle" id="toggleoff"><a href="#" onclick="hideFooter(); return false;">HIDE THIS</a></span> 
    <span class="mainfootertoggle" id="toggleon" style="display:none"><a href="#" onclick="showFooter(); return false;">SHOW THIS</a></span> 
    <div class="mainfooter1" id="footer1"> 
     <?php include "mainfooter1.php"; ?> 
    </div> 
    <div class="mainfooter2" id="footer2"> 
    <?php include "mainfooter4.php"; ?> 
    </div> 
    <div class="mainfooter3" id="footer3"> 
    <?php include "mainfooter3.php"; ?> 
     <div style="clear:both; float:right; position:absolute; bottom:0; right:0; overflow:hidden; margin:5px 15px 5px 5px;"> 
     <?php include "footer.php"; ?> 
     </div> 
    </div> 
</div> 

從閱讀一些其他的問題和答案，我嘗試添加到所有的元素，無論是通過編輯CSS還通過添加代碼的HTML，但本作的要素完全消失。

它穿過我的腦海那就是我真正需要的是一段代碼，當元素被用戶隱藏，這將創建一個cookie，但也將刪除/修改cookie的，如果元素被再次顯示。我意識到，我現在所擁有的（儘管工作不正常）代碼有效地具有「開」開關，但沒有「關」開關。

任何幫助或建議將非常感激。

Answer 1

你所缺的是調用一些代碼，將設置隱藏頁腳如果它以前被隱藏。你從不這樣做。 checkFooter函數將是明顯的一個。你現在不用它，但你應該。但是，如果是getCookie('footer_state') == false，則應顛倒其邏輯，以隱藏頁腳。所以改變這樣的功能：

function checkFooter() { 
    if (getCookie('footer_state') == false) { // if popup WAS closed 
     document.getElementById('toggleoff').style.display = 'none'; 
     document.getElementById('toggleon').style.display = 'block'; 
     document.getElementById('footer1').style.display = 'none'; 
     document.getElementById('footer2').style.display = 'none'; 
     document.getElementById('footer3').style.display = 'none'; 
    } 
} 

現在請確保你調用頁面加載時的方法。使用谷歌分析和mCustomScrollBar腳本在頁面底部添加以下代碼：

<script> 
    checkFooter(); 
</script>