如何在cookie中存儲表格show hide列

我有一個示例代碼來顯示/隱藏表格的列。我想將狀態（用戶選擇的列）存儲到cookie中，以便下次用戶或通過頁面刷新時保持狀態。我聽說有一個jQuery cookie插件，但不知道如何使用它。任何例子哪些jQuery的cookie，我可以在下面的代碼中使用將是有用的。如何在cookie中存儲表格show hide列

下面是示例代碼

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js.cookie.js"></script> 

</head> 
<script> 
$(document).ready(function() { 
    if (typeof Cookies.get('col1') !== 'undefined') { 
     $(".col1").hide(); // or show() depending what you want 
    } 
    if (typeof Cookies.get('col2') !== 'undefined') { 
     $(".col2").hide(); // or show() depending what you want 
    } 
    if (typeof Cookies.get('col3') !== 'undefined') { 
     $(".col3").hide(); // or show() depending what you want 
    } 

    $('input[type="checkbox"]').click(function() { 
    /* var index = $(this).attr('name').substr(3); 
     index--; 
     $('table tr').each(function() { 
      $('td:eq(' + index + ')',this).toggle(); 
      Cookies.set($(this).attr('name'), true); 
     }); 
     $('th.' + $(this).attr('name')).toggle(); 
     Cookies.set($(this).attr('name'), true); 
     */ 
     $('th.' + $(this).attr('name')).toggle(); 
     $('td.' + $(this).attr('name')).toggle(); 
     Cookies.set($(this).attr('name'), true); 
    }); 
}); 
</script> 
<body> 
<table> 
<thead> 
    <tr> 
     <th class="col1">Header 1</th> 
     <th class="col2">Header 2</th> 
     <th class="col3">Header 3</th> 
    </tr> 
</thead> 
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr> 
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr> 
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr> 
<tr><td class="col1">Column1</td><td class="col2">Column2</td><td class="col3">Column3</td></tr> 
</table> 

<form> 
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br /> 
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br /> 
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br /> 
</form> 
</body> 
</html>

來源

2017-06-24 Martin Joseph

我會用localStorage因爲一個cookie被髮送到服務器的每一個請求......每一個形象，資源文件等，無需添加額外的當服務器不知道任何關於此cookie的無用負載時

如果您向所有其他單元添加了相同的類，則可以使用輸入的name來匹配這些類，您已經在標題單元格上具有匹配的類。

存放在localStorage的數組，這樣做：

// get data from storage and convert from string to array 
var hiddenCols = JSON.parse(localStorage.getItem('hidden-cols') || '[]'), 
    $checkBoxes = $('.col-check'), 
    $rows = $('#myTable tr'); 
// loop over array and hide appropriate columns and check appropriate checkboxes 
$.each(hiddenCols, function(i, col) { 
    $checkBoxes.filter('[name=' + col + ']').prop('checked', true) 
    $rows.find('.' + col).hide(); 
}); 

$checkBoxes.change(function() { 
    // toggle appropriate column class 
    $('table .' + this.name).toggle(!this.checked); 
    // create and store new array 
    hiddenCols = $checkBoxes.filter(':checked').map(function() { 
    return this.name; 
    }).get(); 
    localStorage.setItem('hidden-cols', JSON.stringify(hiddenCols)) 
});

DEMO

來源

2017-06-24 22:04:03 charlietfl

謝謝，這工作。如何避免閃爍..我認爲，當它加載時，它顯示，然後隱藏列。 –

你是否在普通頁面而不是在演示中試用它？如果有幫助，可以默認隱藏行並在頁面加載時進行相反操作。或者使用加載覆蓋...許多可視變通辦法可以使用 – charlietfl

您可以使用此Javascript API，使Cookie的使用非常簡單：https://github.com/js-cookie/js-cookie

例（你的問題）：

Cookies.set('col1', 'value'); 
Cookies.set('col2', 'value'); 
Cookies.set('col3', 'value');

並獲得他們後來：

if (typeof Cookies.get('col1') !== 'undefined') // col1 shown 
if (typeof Cookies.get('col2') !== 'undefined') // col2 shown 
if (typeof Cookies.get('col3') !== 'undefined') // col3 shown

編輯：在你的例子集成。您需要將「colX」類添加到該列的所有td元素以使其工作（也可以隱藏或最初顯示它們）。還有其他的方法比這個，但是這是最快的：

$(document).ready(function() { 
    if (typeof Cookies.get('col1') !== 'undefined') { 
     $(".col1").hide(); // or show() depending what you want 
    } 
    if (typeof Cookies.get('col2') !== 'undefined') { 
     $(".col2").hide(); // or show() depending what you want 
    } 
    if (typeof Cookies.get('col3') !== 'undefined') { 
     $(".col3").hide(); // or show() depending what you want 
    } 
    $('input[type="checkbox"]').click(function() { 
     $('th.' + $(this).attr('name')).toggle(); 
     $('td.' + $(this).attr('name')).toggle(); 
     Cookies.set($(this).attr('name'), true); 
    }); 
});

來源

2017-06-24 21:01:33 puelo

欣賞你的時間。新的Javascript，有沒有什麼辦法，你能幫我怎麼把這個例子整合起來 –

編輯我的答案。根據您的需求，這可能不是最好的解決方案，但您應該可以繼續。 – puelo

我需要定義Cookie嗎？ –

如何在cookie中存儲表格show hide列

回答

相關問題