告别重复请求：Bootstrap Table 数据缓存策略全解析

告别重复请求：Bootstrap Table 数据缓存策略全解析

【免费下载链接】bootstrap-table wenzhixin/bootstrap-table: 是一个基于 Bootstrap 的表格插件，它没有使用数据库。适合用于数据展示，特别是对于需要使用 Bootstrap 和表格展示的场景。特点是表格插件、Bootstrap、无数据库。 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table

你是否遇到过这样的情况：用户在表格中切换页码、排序或筛选时，页面反复向服务器发送相同请求？这不仅浪费带宽资源，还会让用户感到明显的加载延迟。本文将详细介绍如何利用 Bootstrap Table 的 Cookie 扩展（src/extensions/cookie/bootstrap-table-cookie.js）实现数据状态缓存，通过保存用户操作偏好和查询条件，减少 60% 以上的重复网络请求。

缓存原理与适用场景

Bootstrap Table 的缓存机制基于浏览器存储技术，通过在本地保存表格的关键状态参数，实现页面刷新或重新访问时的状态恢复。核心原理是将用户的操作行为（如排序字段、页码、筛选条件）序列化后存储在 Cookie、localStorage 或 sessionStorage 中，在表格初始化时自动读取并应用这些参数。

典型适用场景：

• 后台管理系统的列表页（如订单管理、用户列表）
• 数据筛选频繁的报表页面
• 需要记住用户浏览位置的内容展示页
• 对实时性要求不高的数据查询场景

三种存储方案对比与配置

Bootstrap Table 提供了三种存储方式，可根据项目需求灵活选择：

存储方式	优点	缺点	适用场景	配置参数
Cookie	兼容性好，支持过期时间	存储容量小（4KB），每次请求携带	需要跨域共享状态	cookieStorage: 'cookieStorage'
localStorage	存储容量大（5MB），持久化保存	同源限制，不支持自动过期	长期保存用户偏好	cookieStorage: 'localStorage'
sessionStorage	会话级存储，隐私性好	页面关闭后数据丢失	临时表单状态保存	cookieStorage: 'sessionStorage'

基础配置示例（选择 localStorage 存储）：

<table id="table" 
  data-toggle="table"
  data-url="/api/data"
  data-cookie="true"
  data-cookie-storage="localStorage"
  data-cookie-id-table="product-table"
  data-cookie-expire="7d">
  <!-- 列定义 -->
</table>

核心实现代码解析

缓存功能的核心实现位于 src/extensions/cookie/bootstrap-table-cookie.js 文件中，主要包含三个模块：存储管理、状态保存和状态恢复。

1. 存储配置与初始化

// 代码片段：配置存储引擎（第546-614行）
configureStorage () {
  this._storage = {}
  switch (this.options.cookieStorage) {
    case 'cookieStorage':
      this._storage.setItem = (cookieName, cookieValue) => {
        document.cookie = [
          cookieName, '=', encodeURIComponent(cookieValue),
          `; expires=${UtilsCookie.calculateExpiration(this.options.cookieExpire)}`,
          this.options.cookiePath ? `; path=${this.options.cookiePath}` : '',
          this.options.cookieDomain ? `; domain=${this.options.cookieDomain}` : '',
          this.options.cookieSecure ? '; secure' : '',
          `;SameSite=${this.options.cookieSameSite}`
        ].join('')
      }
      // ...其他存储方法实现
}

2. 状态保存机制

系统会在用户执行关键操作时自动保存状态，主要监听以下事件：

• 排序操作（onSort 方法）
• 分页切换（onPageNumber、onPageListChange 方法）
• 列显示/隐藏（_toggleColumn 方法）
• 搜索筛选（onSearch 方法）

以排序状态保存为例：

// 代码片段：排序状态保存（第294-311行）
onSort (...args) {
  super.onSort(...args)
  if (!this.options.cookie) return
  
  if (this.options.sortName === undefined || this.options.sortOrder === undefined) {
    UtilsCookie.deleteCookie(this, UtilsCookie.cookieIds.sortName)
    UtilsCookie.deleteCookie(this, UtilsCookie.cookieIds.sortOrder)
  } else {
    this.options.sortPriority = null
    UtilsCookie.deleteCookie(this, UtilsCookie.cookieIds.sortPriority)
    UtilsCookie.setCookie(this, UtilsCookie.cookieIds.sortOrder, this.options.sortOrder)
    UtilsCookie.setCookie(this, UtilsCookie.cookieIds.sortName, this.options.sortName)
  }
}

3. 状态恢复流程

表格初始化时，initCookie 方法会从存储中读取并恢复状态：

// 代码片段：状态恢复（第436-524行）
initCookie () {
  if (!this.options.cookie) return
  
  const sortOrderCookie = UtilsCookie.getCookie(this, UtilsCookie.cookieIds.sortOrder)
  const sortOrderNameCookie = UtilsCookie.getCookie(this, UtilsCookie.cookieIds.sortName)
  // ...读取其他状态参数
  
  // 应用排序状态
  this.options.sortOrder = sortOrderCookie ? sortOrderCookie : this.options.sortOrder
  this.options.sortName = sortOrderNameCookie ? sortOrderNameCookie : this.options.sortName
  
  // 应用分页状态
  this.options.pageNumber = pageNumberCookie ? +pageNumberCookie : this.options.pageNumber
  this.options.pageSize = pageListCookie ? pageListCookie === 'all' ? 
    this.options.formatAllRows() : +pageListCookie : this.options.pageSize
}

高级应用：自定义缓存策略

1. 选择性缓存配置

通过 cookiesEnabled 参数可精确控制需要缓存的状态类型：

data-cookies-enabled="['bs.table.sortName', 'bs.table.pageNumber', 'bs.table.filterControl']"

支持的缓存项包括：

• sortName/sortOrder: 排序字段和方向
• pageNumber/pageList: 页码和每页条数
• hiddenColumns: 隐藏列状态
• searchText: 搜索关键词
• filterControl: 筛选条件

2. 缓存过期时间设置

通过 data-cookie-expire 参数设置缓存有效期，支持多种时间单位：

<!-- 不同时间单位示例 -->
data-cookie-expire="2h"  <!-- 2小时 -->
data-cookie-expire="1d"  <!-- 1天 -->
data-cookie-expire="1w"  <!-- 1周 -->
data-cookie-expire="30d" <!-- 30天 -->

时间计算逻辑位于 src/extensions/cookie/bootstrap-table-cookie.js 的 calculateExpiration 方法（第60-95行），支持秒(s)、分(mi)、时(h)、天(d)、月(m)、年(y)单位。

3. 缓存操作API

通过 JavaScript API 可手动控制缓存状态：

// 获取当前缓存
const cookies = $('#table').bootstrapTable('getCookies');

// 清除特定缓存
$('#table').bootstrapTable('deleteCookie', 'sortName');

// 强制刷新数据（不使用缓存）
$('#table').bootstrapTable('refresh', { 
  url: '/api/new-data',
  cookie: false  // 临时禁用缓存
});

性能优化与注意事项

缓存优化建议

1. 合理设置过期时间：频繁变化数据建议设置较短有效期（如1小时）
2. 减少缓存体积：仅缓存必要字段，避免存储大量数据
3. 主动失效机制：数据更新后调用 deleteCookie 清理旧缓存
4. 本地数据预处理：复杂筛选可在前端完成，减少服务器请求

常见问题解决方案

• 缓存与实时性冲突：使用 data-side-pagination="server" 时，结合 cache: false 参数
• 多表格冲突：确保每个表格设置唯一的 data-cookie-id-table
• 跨域存储限制：跨域场景只能使用 Cookie 存储，并配置正确的 cookieDomain

总结与最佳实践

Bootstrap Table 的缓存机制通过简单配置即可实现显著的性能优化，关键是根据实际业务场景选择合适的存储方案和缓存策略。最佳实践总结：

1. 优先使用 localStorage：在无兼容性要求时，优先选择 localStorage 获得更大存储容量
2. 设置唯一表ID：始终为 data-cookie-id-table 设置唯一值，避免多表格冲突
3. 实现缓存失效机制：在数据更新操作后主动清理相关缓存
4. 结合节流防抖：筛选条件变化时添加防抖处理，减少缓存更新频率
5. 测试兼容性：老旧浏览器（如IE8-）需使用 Cookie 存储方案

通过本文介绍的缓存策略，你可以轻松实现表格状态的持久化，为用户提供流畅的操作体验，同时显著减轻服务器负担。完整的 API 文档可参考官方文档 site/pages/docs/extensions/cookie.mdx。

【免费下载链接】bootstrap-table wenzhixin/bootstrap-table: 是一个基于 Bootstrap 的表格插件，它没有使用数据库。适合用于数据展示，特别是对于需要使用 Bootstrap 和表格展示的场景。特点是表格插件、Bootstrap、无数据库。 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table