JS: Использование localStorage в сочетании со столбцами скрытия / показа в таблице начальной загрузки создает бесконечный цикл

Question

Я использую загрузочную таблицу . Я также использую его расширение Cookie (но выбрал метод localStorage). Всякий раз, когда я изменяю сортировку, номер страницы и т. Д., Эти данные сохраняются в localStorage, и состояние таблицы остается неизменным после обновления. К сожалению, он не сохраняет активные столбцы.

Итак, всякий раз, когда я убираю флажок в раскрывающемся списке и тем самым скрываю его, он не сохраняется в localStorage. (Это работает в документации и примерах для файлов cookie, хотя, как показано здесь .)

Я не смог выяснить различия в HTML, поэтому с тех пор я попытался решить егов противном случае.

Мой подход заключается в том, чтобы сохранять атрибуты data-field текущих видимых столбцов в массиве в локальном хранилище (через JSON.stringify) всякий раз, когда элемент отмечается / не отмечается в раскрывающемся списке. А после обновления попробуйте перебрать массив и использовать Bootstrap-Table showColumn.

Это, однако, завершается сбоем моего браузера после получения бесчисленного количества из них: [Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

Мой HTML выглядит примерно так:

<div class="bootstrap-table bootstrap4">
      <div class="fixed-table-toolbar"></div>
      
      <div class="fixed-table-container fixed-height" style="height: 460px; padding-bottom: 49px;">
      <div class="fixed-table-header" style="margin-right: 0px;"><table class="table table-bordered table-hover" style="width: 1074px;"><thead><tr><th style="" data-field="id"><div class="th-inner ">ID</div><div class="fht-cell" style="width: 186px;"></div></th><th style="" data-field="name"><div class="th-inner ">Item Name</div><div class="fht-cell" style="width: 452px;"></div></th><th style="" data-field="price"><div class="th-inner ">Item Price</div><div class="fht-cell" style="width: 432px;"></div></th></tr></thead></table></div>
      <div class="fixed-table-body">
      <div class="fixed-table-loading table table-bordered table-hover fixed-table-border" style="top: 50px; display: none; width: 1074px;">
      <span class="loading-wrap">
      <span class="loading-text">Loading, please wait</span>
      <span class="animation-wrap"><span class="animation-dot"></span></span>
      </span>
      </div>
      <table id="table" data-toggle="bootstrap-table" data-height="460" data-url="json/data1.json" class="table table-bordered table-hover" style="margin-top: -49px;">
  <thead><tr><th style="" data-field="id"><div class="th-inner ">ID</div><div class="fht-cell"></div></th><th style="" data-field="name"><div class="th-inner ">Item Name</div><div class="fht-cell"></div></th><th style="" data-field="price"><div class="th-inner ">Item Price</div><div class="fht-cell"></div></th></tr></thead>
<tbody><tr data-index="0"><td style="">0</td><td style="">Item 0</td><td style="">$0</td></tr><tr data-index="1"><td style="">1</td><td style="">Item 1</td><td style="">$1</td></tr><tr data-index="2"><td style="">2</td><td style="">Item 2</td><td style="">$2</td></tr><tr data-index="3"><td style="">3</td><td style="">Item 3</td><td style="">$3</td></tr><tr data-index="4"><td style="">4</td><td style="">Item 4</td><td style="">$4</td></tr><tr data-index="5"><td style="">5</td><td style="">Item 5</td><td style="">$5</td></tr><tr data-index="6"><td style="">6</td><td style="">Item 6</td><td style="">$6</td></tr><tr data-index="7"><td style="">7</td><td style="">Item 7</td><td style="">$7</td></tr><tr data-index="8"><td style="">8</td><td style="">Item 8</td><td style="">$8</td></tr><tr data-index="9"><td style="">9</td><td style="">Item 9</td><td style="">$9</td></tr><tr data-index="10"><td style="">10</td><td style="">Item 10</td><td style="">$10</td></tr><tr data-index="11"><td style="">11</td><td style="">Item 11</td><td style="">$11</td></tr><tr data-index="12"><td style="">12</td><td style="">Item 12</td><td style="">$12</td></tr><tr data-index="13"><td style="">13</td><td style="">Item 13</td><td style="">$13</td></tr><tr data-index="14"><td style="">14</td><td style="">Item 14</td><td style="">$14</td></tr><tr data-index="15"><td style="">15</td><td style="">Item 15</td><td style="">$15</td></tr><tr data-index="16"><td style="">16</td><td style="">Item 16</td><td style="">$16</td></tr><tr data-index="17"><td style="">17</td><td style="">Item 17</td><td style="">$17</td></tr><tr data-index="18"><td style="">18</td><td style="">Item 18</td><td style="">$18</td></tr><tr data-index="19"><td style="">19</td><td style="">Item 19</td><td style="">$19</td></tr><tr data-index="20"><td style="">20</td><td style="">Item 20</td><td style="">$20</td></tr></tbody></table><div class="fixed-table-border" style="height: 0px;"></div></div>
      <div class="fixed-table-footer" style="display: none;"><table><thead><tr></tr></thead></table></div>
      </div>
      <div class="fixed-table-pagination" style="display: none;"></div>
      </div>

Это способ хранения данных при отображении / скрытии столбцов

$('#table').on('column-switch.bs.table', function () {
    let c = $(.table).find('th[data-field]'); // table heads
    let df = [] // array with data-field attr
    for (i = 0; i < c.length; i++) {
        let a = $(c[i]).attr('data-field');
        df.push(a);
    }
    localStorage.setItem("data-fields", JSON.stringify(df));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

и вот как я пытался их извлечь и использовать showColumn:

let df = JSON.parse(localStorage.getItem("data-fields"));
    for (i = 0; i < df.length; i++) {
        $('#table').bootstrapTable('showColumn', df[i]);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>