Maybe 金融项目中的交易页面会话状态保持方案

背景与问题分析

在 Maybe 金融项目中，/transactions 页面是用户查看所有账户交易记录的核心界面。当前系统存在一个明显的用户体验问题：当用户离开该页面再返回时，之前设置的筛选条件、分页位置和滚动位置都会丢失。这种状态丢失现象打断了用户的操作流程，降低了使用效率。

技术挑战

实现交易页面状态的持久化面临几个关键技术挑战：

1. 状态完整性：需要保存包括筛选条件、分页参数和滚动位置在内的完整页面状态
2. 跨页面导航：用户在查看单个交易详情后返回时，应能恢复之前的浏览上下文
3. 性能考量：状态保存和恢复机制不应显著影响页面加载性能

解决方案设计

会话存储方案

采用服务器端会话存储是最可靠的选择，相比客户端方案具有以下优势：

• 安全性：敏感数据不会暴露在客户端
• 一致性：不受浏览器缓存或本地存储限制的影响
• 可靠性：即使用户更换设备或浏览器也能保持状态

实现细节

1. 状态数据结构：

{
  filters: {
    account_id: 123,
    date_range: { start: '2025-01-01', end: '2025-01-31' },
    category: 'food'
  },
  pagination: {
    page: 2,
    per_page: 25
  },
  scroll_position: 850
}

2. 状态保存时机：

• 每次用户修改筛选条件或翻页时自动保存
• 用户离开页面时捕获当前滚动位置并保存

3. 状态恢复流程：

sequenceDiagram
  用户->>+服务器: 访问/transactions
  服务器->>+会话存储: 获取用户会话
  会话存储-->>-服务器: 返回保存的状态
  服务器->>+数据库: 查询带过滤条件的交易
  数据库-->>-服务器: 返回交易数据
  服务器-->>-用户: 渲染带状态的页面

技术实现要点

1. 会话存储优化：

• 使用Redis作为会话存储后端，提高读写性能
• 实现差异更新，只修改变化的状态部分
• 设置合理的会话过期时间（如30天）

2. 滚动位置恢复：

document.addEventListener('DOMContentLoaded', () => {
  const savedPosition = <%= @session_scroll_position %>;
  if(savedPosition) {
    window.requestAnimationFrame(() => {
      window.scrollTo(0, savedPosition);
    });
  }
});

window.addEventListener('beforeunload', () => {
  fetch('/save_scroll_position', {
    method: 'POST',
    body: JSON.stringify({ position: window.scrollY }),
    headers: { 'Content-Type': 'application/json' }
  });
});

3. 后端处理逻辑：

# 在控制器中
def index
  @transactions = Transaction
    .filter_by(session[:transaction_filters] || {})
    .page(session[:transaction_pagination]&.[](:page) || 1)
    .per(session[:transaction_pagination]&.[](:per_page) || 25)
end

def save_scroll_position
  session[:transaction_scroll] = params[:position]
  head :ok
end

用户体验提升

完整的会话状态保持机制将带来以下用户体验改进：

1. 连续性工作流：用户可以无缝地在查看交易详情和浏览交易列表间切换
2. 个性化默认设置：系统会记住用户偏好的筛选条件和分页大小
3. 减少重复操作：避免每次返回都要重新设置相同的筛选条件

扩展思考

这种会话状态保持模式可以抽象为通用解决方案，应用于项目中其他需要保持状态的列表页面。未来可考虑：

1. 开发状态管理中间件，统一处理各类页面的状态保持需求
2. 增加状态快照功能，允许用户保存多个筛选条件组合
3. 实现跨设备状态同步，提升多端一致性体验

通过这种技术方案，Maybe金融项目能够显著提升交易查询功能的用户体验，同时为其他类似功能提供可复用的技术模式。