【28 - 记住上一个页面tab】实现一个记住用户上次点击的tab，上次搜索过的数据 bysking

前端会话缓存管理：一个优雅的会话级别数据持久化解决方案

在现代 Web 应用开发中，我们经常需要在用户会话期间临时存储一些状态数据。今天给大家分享一个实用的会话缓存管理工具类 ------ TempWindowStore，它能帮助我们更好地管理 sessionStorage 中的数据。

🎯 核心功能

这个工具类主要实现了以下功能：

基于用户身份的数据隔离
结构化的缓存数据管理
自动化的数据清理机制
异常安全的数据操作

🔧 核心方法解析

1. 数据获取 - getFlagData

ini 复制代码

typescript
getFlagData = (flag) => {
  let key = this.getDataKey(flag);
  let resData = {};

  try {
    resData = JSON.parse(sessionStorage.getItem(key)!);
  } catch (error) {
    console.log(error, 'error: session cache data get');
  }

  return resData;
};

亮点：

✅ 自动拼接用户 Token，确保数据隔离
✅ 异常捕获，避免 JSON 解析错误导致页面崩溃
✅ 默认返回空对象，保证数据结构一致性

2. 数据存储 - setFlagData

typescript 复制代码

typescript
setFlagData = (flag: string, data = {}) => {
  this.clearFlagData(flag);         // 先清理旧数据
  
  let key = this.getDataKey(flag);  // 生成键名
  this.flagList.push(key);          // 记录键名

  const preData = this.getFlagData(flag) || {};  // 获取原有数据
  const curdata = {                 // 合并新旧数据
    ...preData,
    ...data,
  };

  try {
    sessionStorage.setItem(key, JSON.stringify(curdata));
  } catch (error) {
    console.log(error, 'error: session cache data set');
  }
};

设计亮点：

🔄 数据合并策略：保留原有数据，只更新新增字段
🧹 自动清理：避免重复数据堆积
🛡️ 异常处理：保障存储过程的稳定性

3. 数据清理 - clearFlagData

ini 复制代码

typescript
clearFlagData = (flag: string) => {
  const keys = Object.keys(sessionStorage);
  keys.forEach((key) => {
    if (key.startsWith(flag)) {
      sessionStorage.removeItem(key);
    }
  });
};

巧妙之处：

🔍 前缀匹配清理，精准定位相关数据
🧹 批量清理，避免数据残留

🎯 实际应用场景

php 复制代码

typescript
// 定义缓存标识
export enum enumFlag {
  followUpTab = 'followUpTab',  // 随访标签页记忆
}

// 使用示例
tempWindowStore.setFlagData(enumFlag.followUpTab, {
  activeKey: '1',
  scrollTop: 500
});

// 获取数据
const tabData = tempWindowStore.getFlagData(enumFlag.followUpTab);

💡 设计优势

用户隔离：通过 Token 确保不同用户数据互不干扰
类型安全：配合枚举使用，避免硬编码字符串
内存友好：自动清理机制防止 sessionStorage 膨胀
开发友好：简洁的 API 设计，降低使用成本

🚀 最佳实践建议

php 复制代码

typescript
// 推荐用法
const cacheKey = enumFlag.followUpTab;
tempWindowStore.setFlagData(cacheKey, { 
  lastVisited: Date.now(),
  userPreferences: { theme: 'dark' }
});

// 数据获取时提供默认值
const userData = tempWindowStore.getFlagData(cacheKey) || {
  lastVisited: 0,
  userPreferences: { theme: 'light' }
};

📝 总结

TempWindowStore 通过封装 sessionStorage 操作，提供了一套完整的会话级数据管理方案。它不仅解决了数据隔离和异常处理等常见问题，还通过优雅的设计提升了开发体验。在需要临时存储用户状态的场景中，这个工具类能够大大提升开发效率和代码质量。

你觉得这个设计思路怎么样？在你的项目中有类似的缓存需求吗？欢迎在评论区交流讨论！

完整函数代码

js 复制代码

const getToken = () => {

        // get and return your user token
}


/** 用户数据缓存类 */
class TempWindowStore {
  flagList: string[] = [];
  userToken = getToken();

  getDataKey = (flag) => {
    return `${flag}_${this.userToken}`;
  };

  getFlagData = (flag) => {
    let key = this.getDataKey(flag);

    let resData = {};

    try {
      resData = JSON.parse(sessionStorage.getItem(key)!);
    } catch (error) {
      console.log(error, 'error: session cache data get');
    }

    return resData;
  };

  setFlagData = (flag: string, data = {}) => {
    this.clearFlagData(flag);

    let key = this.getDataKey(flag);
    this.flagList.push(key);

    const preData = this.getFlagData(flag) || {};

    const curdata = {
      ...preData,
      ...data,
    };

    try {
      sessionStorage.setItem(key, JSON.stringify(curdata));
    } catch (error) {
      console.log(error, 'error: session cache data set');
    }
  };

  clearFlagData = (flag: string) => {
    const keys = Object.keys(sessionStorage);
    keys.forEach((key) => {
      if (key.startsWith(flag)) {
        sessionStorage.removeItem(key);
      }
    });
  };
}

export enum enumFlag {
  pageFlag = 'pageFlag',
}

/** 用户缓存数据实例，比如记住上一次点击的数据 */
export const tempWindowStore = new TempWindowStore();

使用示范