Ember Data页面刷新后Store数据丢失问题求助

Hey there! Let's break down how to fix this common Ember Data issue—since the Store lives only in memory, any page refresh or external navigation (like your payment flow) will wipe it clean. Here are the most reliable solutions tailored to your payment confirmation scenario:

1. 优先方案：从后端重新拉取最新数据 #

This is the most robust approach because after a user completes payment, your backend should already have the updated order/payment status. When the user returns to the confirmation page, simply fetch the record again from your API:

// app/routes/payment/confirmation.js
import Route from '@ember/routing/route';

export default class PaymentConfirmationRoute extends Route {
  async model(params) {
    // 直接从后端获取订单/支付记录
    return this.store.findRecord('order', params.orderId);
  }
}

这种方式能确保你始终使用服务器端的最新权威数据，避免本地存储可能带来的数据不一致问题。

2. 本地存储临时缓存关键数据 #

如果需要在后端更新完成前临时保留数据（比如等待webhook同步状态时），可以用sessionStorage或localStorage暂存记录：

步骤1：跳转支付前保存记录 #

// 在发起支付的路由/组件中
const order = this.store.peekRecord('order', orderId);
// 将记录序列化为JSON并存入sessionStorage
sessionStorage.setItem(`pending-order-${orderId}`, JSON.stringify(order.serialize()));

步骤2：返回确认页时恢复记录 #

// app/routes/payment/confirmation.js
import Route from '@ember/routing/route';

export default class PaymentConfirmationRoute extends Route {
  async model(params) {
    try {
      // 优先尝试从后端获取最新数据
      return await this.store.findRecord('order', params.orderId);
    } catch (error) {
      // 后端未更新时回退到缓存数据
      const cachedOrder = JSON.parse(sessionStorage.getItem(`pending-order-${params.orderId}`));
      if (cachedOrder) {
        // 将缓存数据推回Ember Data Store
        this.store.push(cachedOrder);
        // 清理缓存避免后续数据过期
        sessionStorage.removeItem(`pending-order-${params.orderId}`);
        return this.store.peekRecord('order', params.orderId);
      }
      throw error;
    }
  }
}

3. 使用持久化适配器（长期缓存） #

如果需要跨会话持久化记录，可以用集成本地存储的Ember Data适配器，ember-local-storage插件能简化这个流程：

步骤1：安装插件 #

ember install ember-local-storage

步骤2：为模型生成本地存储适配器 #

ember generate adapter order --adapter=local-storage

步骤3：配置适配器与后端同步（可选） #

如果想结合本地缓存和后端同步，可以修改适配器实现混合逻辑：

// app/adapters/order.js
import LocalStorageAdapter from 'ember-local-storage/adapters/local';
import RESTAdapter from '@ember-data/adapter/rest';

export default class OrderAdapter extends LocalStorageAdapter.extend(RESTAdapter) {
  // 根据需求自定义同步行为，比如本地保存后同步到后端
}

注意：本地存储有容量限制，且不适合存储敏感支付数据，仅用于非机密记录。

问题根源说明 #

Ember Data的Store是内存级缓存——它仅在Ember应用运行期间保存数据。当页面刷新或跳转到外部站点（比如支付网关）时，浏览器会重新加载应用，所有内存数据（包括Store）都会被清空。

内容的提问来源于stack exchange，提问作者Belgacem Ben Ltaif