在 Javascript Cookie 中存储设置

Question

我是 Javascript 新手，我有一个用于 html 表的 Javascript，用户可以编辑它以显示或隐藏 html 表中的列。脚本工作正常。但问题是当页面刷新时，它会显示 html 表中的所有列。它不记得最后的设置。

我希望能够存储脚本中上次操作的设置，以便在刷新或加载页面时记住上次设置。我不知道如何实现这一点，如果你能告诉我如何做到这一点，我将不胜感激？

这里是 Javascript：

查看 jsfiddle https://jsfiddle.net/b9chris/HvA4s/ 的工作示例

<script>
$(document).ready(function(){

$('#edit').click(function() {
    var headers = $('#table th').map(function() {
        var th =  $(this);
        return {
            text: th.text(),
            shown: th.css('display') != 'none'
        };
    });

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>'];
    $.each(headers, function() {
        h.push('<th><input type=checkbox',
               (this.shown ? ' checked ' : ' '),
               '/> ',
               this.text,
               '</th>');
    });
    h.push('</tr></thead></table></div>');
    $('body').append(h.join(''));

    $('#done').click(function() {
        var showHeaders = $('#tableEditor input').map(function() { return this.checked; });
        $.each(showHeaders, function(i, show) {
            var cssIndex = i + 1;
            var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')');
            if (show)
                tags.show();
            else
                tags.hide();
        });

        $('#tableEditor').remove();
        return false;
    });

    return false;
});
});
</script>

Answer 1

用javascript写一个cookie：

document.cookie = "username=John Doe";

您可以将用户名替换为您能想到的任何名称，= 后面的所有内容当然是您的价值。

要读取您的 cookie，您可以使用 W3Scools 的此功能：

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
          c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
      } 
  }
  return "";
}

例如，如果您想获取用户名，只需致电getCookie("username")

Answer 2

您还可以将设置存储到浏览器本地存储：请参阅official documentation。

基本上，当您的脚本正在加载时，只需查看会话存储以检索所需的设置；并且每当用户编辑表格时，将他们的更改放入存储中。它非常简单，而且操作起来确实不像 cookie 那样繁重。