Tabulator 5 本地存储持久化过滤器可用实现示例求询

我正在尝试在Tabulator 5中通过localStorage实现过滤器持久化功能，以下为我编写的独立测试示例：
该示例针对4个列分别配置了过滤器，所有过滤器全部激活时仅会显示1行数据。您可尝试设置4个过滤器后重新加载页面，页面会实时展示当前生效的过滤器列表，以及Tabulator持久化功能用到的localStorage存储内容。
我暂未找到该功能可正常运行的公开线上示例，若大家有可用的相关示例链接，还望提供分享，非常感谢。

测试逻辑说明 #

• 过滤器复选框用于为对应列设置匹配值为1的过滤规则
• 已配置过滤器本地持久化能力，存储介质为localStorage
• 调试区域会展示localStorage中持久化内容的当前值，以及当前生效的过滤器列表
• 当前存在异常：除非同时激活超过1个过滤器后再移除其中一个，否则localStorage不会记录当前使用的过滤器
• 无法将同时激活的4个过滤器全部保存到localStorage
• 重新加载页面时，即使localStorage中已经有持久化的过滤器配置，也不会自动生效

完整测试代码 #

<html>
<head>
  <title>Tabulator 5 filter persistence test</title>
  <script>
    function setFilter(filter) {
      if (document.getElementById(filter).checked) {
        table.addFilter(filter, "=", 1);
      } else {
        table.removeFilter(filter, "=", 1);
      }
      dispDebug();
    }
    function dispDebug() {
      document.getElementById("persist").innerText = localStorage.getItem('tabulator-keeper-filter');
      document.getElementById("filterlist").innerText = JSON.stringify(table.getFilters(true));
    }
  </script>
</head>
<body>
  <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
  <div>
    <ol>
      <li>Filter checkboxes set filters on each column equal to a value of 1.</li>
      <li>Persistence is configured for filter, and using local storage.</li>
      <li>Debug data shows the current value of the local storage persistence and the current value of the filters.</li>
      <li>Local storage doesn't appear to record the filters in use unless more than 1 filter is active, and you then
        remove an active filter.</li>
      <li>It doesn't seem possible to get all 4 filters active and saved to local storage</li>
      <li>Loading the page with persistence set in local storage doesn't apply the filters defined there.</li>
  </div>
  Filters: <br>
  <label for="f1"><b>F1 = 1</b></label><input type="checkbox" id="f1" onclick="setFilter('f1');"><br>
  <label for="f2"><b>F2 = 1</b></label><input type="checkbox" id="f2" onclick="setFilter('f2');"><br>
  <label for="f3"><b>F3 = 1</b></label><input type="checkbox" id="f3" onclick="setFilter('f3');"><br>
  <label for="f4"><b>F4 = 1</b></label><input type="checkbox" id="f4" onclick="setFilter('f4');"><br><br>
  <div style="background-color: rgb(197, 199, 198);">
    <b>Debug data</b><br><br>
    <label for="persist"><b>tabulator-keeper-filter:</b></label>
    <div id="persist" style="background-color: burlywood;"></div><br>
    <label for="filterlist"><b>filter list: </b></label>
    <div id="filterlist" style="background-color:chocolate"></div><br><br>
  </div>
  <div id="example-table"></div>
  <script>
    //define some sample data
    var tabledata = [
      { id: 1, f1: "3", f2: 12, f3: 1, f4: 1 },
      { id: 2, f1: "1", f2: 1, f3: 1, f4: 1 },
      { id: 3, f1: "7", f2: 1, f3: 3, f4: 2 },
      { id: 4, f1: "1", f2: 5, f3: 4, f4: 3 },
      { id: 5, f1: "2", f2: 1, f3: 5, f4: 3 },
    ];
    //create Tabulator on DOM element with id "example-table"
    var table = new Tabulator("#example-table", {
      height: 205,
      persistenceID: "keeper",
      persistenceMode: "local",
      persistence: {
        filter: true,
      },
      data: tabledata, //assign data to table
      layout: "fitColumns", //fit columns to width of table (optional)
      columns: [ //Define Table Columns
        { title: "F1", field: "f1" },
        { title: "F2", field: "f2" },
        { title: "F3", field: "f3" },
        { title: "F4", field: "f4" },
      ],
    });
    dispDebug();
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Dan O'Hara