JavaScript的崩潰表餅乾

Question

我想出了一個腳本，摺疊表

<script type="text/javascript"> 
var rowVisible = true; 
function toggleDisplay(tbl) { 
    var tblRows = tbl.rows; 
    for (i = 0; i < tblRows.length; i++) { 
     if (tblRows[i].className != "headerRow") { 
     tblRows[i].style.display = (rowVisible) ? "none" : ""; 
     } 
    } 
    rowVisible = !rowVisible; 
} 
</script> 


<div class="datagrid"><table id="thread_1"> 
<thead><tr class="headerRow">  

     <th WIDTH="100"><a href="#" onclick="toggleDisplay(document.getElementById('thread_1'))" STYLE="color: white">SLO</a></th> 

它工作正常，但我的問題是，我要保存的狀態時，人離開該網站。我想最簡單的方法就是使用cookie。我以前沒有做過這樣的事情。我怎樣才能做到這一點？

Answer 1

如果你不需要支持，比方說IE7，你可以使用瀏覽器localStorage。

// Our flag to determine if rows are hidden or not 
var rowsVisible = localStorage.getItem('rowsVisible'), 
    // Table handler 
    table = document.getElementById('table'); 

// "rowHidden" not exists in localStorage yet 
if (rowsVisible === null) { 
    rowsVisible = true; 
} else { 
    // localStorage return string 
    rowsVisible = rowsVisible === 'true' ? true : false; 
} 

toggleDisplay(table, rowsVisible ? '' : 'none'); 

document.getElementById('toggleBtn').addEventListener('click', function() { 
    toggleDisplay(table); 
}, false); 

function toggleDisplay(tbl) {  
    var tblRows = table.rows, 
     mode = rowsVisible ? '' : 'none'; 

    for (i = 0; i < tblRows.length; i++) { 
     if (tblRows[i].className != "headerRow") { 
      tblRows[i].style.display = mode; 
     } 
    } 

    localStorage.setItem('rowsVisible', rowsVisible); 
    rowsVisible = !rowsVisible; 
}; 

演示：http://jsfiddle.net/SXAZ4/36/