如何使用jQuery结合localStorage在页面刷新后保存切换按钮状态？

API 探路者

2026-8-19

用jQuery结合localStorage保存表格列切换状态

要实现页面刷新后保留表格列的切换状态，localStorage作为原生浏览器API可以直接和jQuery配合使用，不需要特殊适配，只需要在两个关键节点处理状态：切换列时保存状态、页面加载时恢复状态。

以下是修改后的完整代码：

JavaScript 代码

jQuery($ => {
  const TABLE_COLUMN_STORAGE_KEY = 'tableColumnStates';
  let $headings = $('.heading');

  // 页面初始化时恢复列状态
  function restoreColumnStates() {
    const savedStates = localStorage.getItem(TABLE_COLUMN_STORAGE_KEY);
    if (savedStates) {
      const states = JSON.parse(savedStates);
      // 遍历每一列状态，恢复显示/隐藏
      Object.keys(states).forEach(colClass => {
        $(`.${colClass}`).toggle(states[colClass]);
      });
      // 更新表头colspan
      updateColspan();
    }
  }

  // 保存当前列状态到localStorage
  function saveColumnStates() {
    const states = {};
    // 收集每一列的显示状态
    for (let i = 1; i <= 7; i++) {
      const colClass = `col${i}`;
      states[colClass] = $(`.${colClass}`).is(':visible');
    }
    localStorage.setItem(TABLE_COLUMN_STORAGE_KEY, JSON.stringify(states));
  }

  // 更新表头的colspan值
  function updateColspan() {
    const visibleCount = $('table tbody tr:first > td:visible').length;
    const colspan = visibleCount / $headings.length;
    $headings.prop('colspan', colspan);
  }

  // 绑定按钮点击事件
  $('.hide').on('click', e => {
    const targetIndex = e.target.dataset.targetIndex;
    $(`.col${targetIndex}`).toggle();
    updateColspan();
    saveColumnStates();
  });

  // 页面加载时恢复状态
  restoreColumnStates();
});

CSS 代码

table,
th,
td {
  border: 1px solid black;
}

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
  </tbody>
</table>
<br>

<button class="hide" data-target-index="1">1</button>
<button class="hide" data-target-index="2">2</button>
<button class="hide" data-target-index="3">3</button>
<button class="hide" data-target-index="4">4</button>
<button class="hide" data-target-index="5">5</button>
<button class="hide" data-target-index="6">6</button>
<button class="hide" data-target-index="7">7</button>

关键逻辑说明

状态存储与读取：localStorage只能存储字符串，所以用JSON.stringify把列状态对象转成字符串保存，用JSON.parse把读取到的字符串转回对象。
初始化恢复：页面加载时先检查localStorage里有没有保存的状态，有就遍历每一列设置显示/隐藏，同时更新表头的colspan。
状态更新：每次点击切换按钮后，立即收集当前所有列的显示状态，保存到localStorage，确保刷新后能拿到最新状态。

内容的提问来源于stack exchange，提问作者aastha

如何使用jQuery结合localStorage在页面刷新后保存切换按钮状态？

JavaScript 代码 #

CSS 代码 #

HTML 代码 #

关键逻辑说明 #

JavaScript 代码

CSS 代码

HTML 代码

关键逻辑说明