切換緩存/ cookies

Question

我正在使用jQuery切換功能進行導航。 默認情況下，作者切換是可見的，檔案切換關閉。

http://jsfiddle.net/TeDFs/4/

我的問題是，當用戶切換到另一個頁面的切換按鈕復位自己。

例如，當用戶關閉作者切換並打開檔案切換，然後導航到另一頁時，會加載默認設置。

我讀過可以通過cookie存儲設置，但我絕對是jQuery的新手，如果有人能夠幫助我，這將是非常棒的！

HTML

<div id="authors" class="widget"> 
<h2 class="widget-title-visible">Authors</h2> 
<div class="toggle"> 
    <div class="submenu"> 
     <ul> 
      <li>Name 1</li> 
      <li>Name 2</li> 
      <li>Name 3</li> 
      <li>Name 3</li> 
     </ul> 
    </div> 
</div> 

<div id="archives" class="widget"> 
<h2 class="widget-title">Archiv</h2> 
<div class="toggle hidden"> 
    <div class="submenu">  
     <ul> 
      <li>November 2012</li> 
      <li>Oktober 2012</li> 
     </ul> 
    </div> 
</div> 
</div>​ 

jQuery的

function toggleWidgets() { 
    jQuery('.widget-title').addClass('plus'); 

    jQuery('.widget-title-visible').addClass('minus'); 

    jQuery('.widget-title').click(function() { 
     $(this).toggleClass('plus').toggleClass('minus').next().toggle(180); 
    }); 

    jQuery('.widget-title-visible').click(function() { 
     $(this).toggleClass('minus').toggleClass('plus').next().toggle(180); 
    }); 
} 

jQuery(document).ready(function() { 
    toggleWidgets(); 
})​ 

CSS

.hidden{ 
    display:none; 
} 

.plus { 
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat; 
    padding: 0 0 0 12px; 
} 
.minus { 
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat; 
    padding: 0 0 0 12px; 
} 

Answer 1

function createCookie(name, value, days) { 
    var expires; 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
     expires = "; expires=" + date.toGMTString(); 
    } 
    else expires = ""; 
    document.cookie = name + "=" + value + expires + "; path=/"; 
} 


function readCookie(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 null; 
} 

function eraseCookie(name) { 
    createCookie(name, "", -1); 
} 

下面是功能讀/寫的cookie。你可以隨時保持你的設置:)

如果你想切換div的可見性，只需使用div的「id」作爲cookie名稱並保存在cookie「true」或「false」因爲它是可見的或不可見的。

當您單擊DIV，得到它的「身份證」和可視性和

var divId = $(this).attr("id"); 
var visible = false; 
if($(this).isVisible()) 
    visible = true; 

createCookie(divId, visible, 1); 

而當你重新加載頁面只是

var visibleAuthors = readCookie("authors"); 
var visibleArchives = readCookie("archives") 

加載頁面時解析cookie的結果，然後顯示你想要的分區