如何通过临时数据库实现两Screen间无数据丢失导航（弃用本地存储）

一、实现内存临时数据仓库 #

通过单例模式创建内存级数据存储类，临时保存Person及关联的Functions数据，避免路由跳转时数据丢失。以JavaScript为例：

class TemporaryDataStore {
  static instance = null;
  #data = new Map();

  constructor() {
    if (!TemporaryDataStore.instance) {
      TemporaryDataStore.instance = this;
    }
    return TemporaryDataStore.instance;
  }

  // 保存数据，深拷贝避免引用污染
  save(key, value) {
    this.#data.set(key, structuredClone(value));
  }

  // 获取数据
  get(key) {
    return this.#data.get(key);
  }

  // 删除指定键的数据
  delete(key) {
    this.#data.delete(key);
  }

  // 清空所有数据
  clear() {
    this.#data.clear();
  }
}

// 全局使用同一实例
const tempStore = new TemporaryDataStore();

核心逻辑：

• 单例模式确保整个应用只有一个存储实例，数据全局可访问
• 用structuredClone做深拷贝，防止后续修改操作影响存储的原始数据
• 可以用Person的唯一ID（如person_123）作为存储键，支持多Person场景

二、导航前后的数据流转 #

1. Person Screen侧：当Person数据加载完成或更新时，立即存入临时仓库

   // 假设从接口获取到personData
   const personData = {
     "Person": {
       "id": "person_123",
       "Functions": [/* 已有的Function列表 */]
     }
   };
   // 存入仓库
   tempStore.save(personData.Person.id, personData);
   

2. 跳转到添加Function页面：只传递Person的ID（无需传递整个大对象），在添加页面通过ID从仓库取数据

   // 从路由参数获取personId
   const personId = new URLSearchParams(window.location.search).get('personId');
   const storedData = tempStore.get(personId);
   
   // 添加新Function后，更新仓库中的数据
   storedData.Person.Functions.push({
     "name": "new Function",
     "subItems": []
   });
   tempStore.save(personId, storedData);
   

3. 返回Person Screen：直接从仓库取最新数据渲染，无需重新请求后端

   const personId = /* 从路由或状态中获取 */;
   const latestPersonData = tempStore.get(personId);
   // 用latestPersonData渲染页面
   

三、临时数据的删除时机 #

根据业务场景选择合适的删除时机，避免内存占用过高：

• 操作完成后删除：当用户将Person数据提交到后端并成功后，立即删除对应临时数据

  // 提交成功后调用
  tempStore.delete(personId);
  

• 离开业务流程时删除：监听路由变化，当用户导航到非Person相关的页面（如首页、其他模块），删除对应临时数据
• 组件卸载时删除：在Person Screen组件的卸载钩子中（如React的useEffect清理函数、Vue的onUnmounted）删除数据，防止内存泄漏
• 超时自动清理：设置定时器，若用户超过30分钟未操作Person相关页面，自动清理对应数据

  let cleanupTimer;
  // 每次操作Person数据时重置定时器
  function resetCleanupTimer(personId) {
    clearTimeout(cleanupTimer);
    cleanupTimer = setTimeout(() => {
      tempStore.delete(personId);
    }, 30 * 60 * 1000); // 30分钟
  }
  

注意事项 #

• 该方案仅适用于单页应用（SPA），多页应用（MPA）中每个页面是独立进程，内存数据不共享，无法使用此方式
• 若应用支持多标签页操作，每个标签页的临时仓库是独立的，无需跨标签同步，符合临时存储的定位
• 若数据量极大，深拷贝可能影响性能，可根据实际情况优化（如只拷贝需要修改的部分）

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