Question

我有一个示例代码来显示/隐藏表的列。我想将状态（用户选择的列）存储到cookie中，以便当用户下次或通过页面刷新时，状态得以维持。我听说有一个jquery cookie插件，但不知道如何使用它。我可以在下面的代码中使用的jquery cookie的任何示例都是有用的。

以下是示例代码

<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>

Answer 1

您可以使用此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

编辑：集成在您的示例中。您需要添加＆＃34; colX＆＃34;该列的所有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);
    });
});

Answer 2

我会使用localStorage，因为每次请求都会向服务器发送一个cookie ...每个图像，资源文件等。当服务器对此cookie一无所知时，无需添加额外的不必要的有效负载< / p>

您已经在标题单元格上有匹配的类，如果您向所有其他单元格添加相同的类，则可以使用输入的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

如何在cookie中存储表显示隐藏列

2 个答案: