如何在ag-grid中将筛选条件存储到Cookie并实现持久化？

这问题我之前做项目时刚好碰到过，其实ag-grid本身提供了现成的API来处理筛选状态的导出和导入，结合Cookie操作就能轻松实现需求——让筛选条件在页面刷新、登出再登录后依然保留。下面是具体的实现步骤和代码示例：

核心思路 #

• 监听筛选变化：利用ag-grid的filterChanged事件，在用户修改筛选条件时触发保存逻辑
• 导出筛选状态：通过ag-grid的API获取当前的筛选模型
• 持久化到Cookie：将筛选模型序列化为字符串后存入Cookie，并设置合理的过期时间
• 初始化时恢复：在ag-grid加载完成后，从Cookie读取并恢复之前的筛选条件

具体实现代码 #

第一步：封装Cookie读写工具函数 #

原生JS操作Cookie的代码比较基础，我们可以封装两个简单的函数来简化操作：

// 写入Cookie，默认保存7天，可自定义过期时间
function setCookie(name, value, days = 7) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  // 设置path为/确保全站可访问，SameSite=Lax提升安全性
  document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/; SameSite=Lax`;
}

// 根据名称读取Cookie
function getCookie(name) {
  const nameEQ = `${name}=`;
  const cookieSegments = document.cookie.split(';');
  for (let seg of cookieSegments) {
    seg = seg.trim();
    if (seg.startsWith(nameEQ)) {
      return decodeURIComponent(seg.substring(nameEQ.length));
    }
  }
  return null;
}

第二步：配置ag-grid并绑定事件 #

在ag-grid的配置中，我们需要监听gridReady和filterChanged两个事件，分别处理筛选条件的恢复和保存：

// 初始化ag-grid配置
const gridOptions = {
  // 你的列定义，根据业务需求配置筛选器
  columnDefs: [
    { field: 'userName', filter: 'agTextColumnFilter', floatingFilter: true },
    { field: 'age', filter: 'agNumberColumnFilter', floatingFilter: true },
    { field: 'department', filter: 'agSetColumnFilter', floatingFilter: true }
  ],
  // 其他ag-grid配置项...
  onGridReady: (params) => {
    const gridApi = params.api;
    // 页面加载/登录后，尝试从Cookie恢复筛选条件
    const savedFilterStr = getCookie('agGridFilterModel');
    if (savedFilterStr) {
      try {
        const filterModel = JSON.parse(savedFilterStr);
        gridApi.setFilterModel(filterModel);
      } catch (error) {
        console.error('恢复筛选条件失败，已忽略:', error);
      }
    }
  },
  onFilterChanged: (params) => {
    const gridApi = params.api;
    // 获取当前的筛选模型
    const currentFilterModel = gridApi.getFilterModel();
    // 将筛选模型序列化为字符串后存入Cookie
    setCookie('agGridFilterModel', JSON.stringify(currentFilterModel));
  }
};

// 渲染ag-grid到指定DOM元素
new agGrid.Grid(document.getElementById('ag-grid-container'), gridOptions);

注意事项 #

• 敏感数据处理：如果筛选条件包含用户敏感信息，建议对序列化后的字符串进行加密（比如AES加密）后再存入Cookie，读取时对应解密，避免数据泄露
• Cookie大小限制：Cookie的单条存储上限约为4KB，如果你的筛选模型非常复杂（比如多列复杂筛选），可能会超出限制，这种情况下可以考虑改用localStorage存储（但要注意localStorage是同域名共享，且不会随请求发送）
• 过期时间调整：根据业务需求调整Cookie的过期时间，比如设置为30天或者用户手动清除筛选时再删除Cookie
• 多实例冲突：如果页面中有多个ag-grid实例，要给每个实例的Cookie名称加前缀（比如agGridFilterModel_userList），避免互相覆盖

这样操作下来，用户设置的筛选条件就会持久化在Cookie中，不管是刷新页面还是登出再登录，只要Cookie未过期且未被清除，就能自动恢复之前的筛选状态啦。

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