vue中路由回退数据缓存的最佳实践

H5 应用中实现路由回退表单数据缓存的最佳实践

在开发 H5 应用时，我们经常会遇到这样的场景：用户填写了一个复杂的表单，需要临时离开去查看其他页面，再通过返回按钮回到表单页面继续填写。默认情况下，当用户离开页面后再返回时，之前填写的表单数据会丢失，这严重影响了用户体验。

本文将介绍一种基于 Vue.js 的通用解决方案，实现在 H5 应用中路由回退时保留表单数据。我们以一个租车应用中的取车/还车表单为例，展示如何实现这一功能。

问题分析

在 Vue 单页应用中，组件的销毁和重新创建会导致状态丢失。这个问题在以下场景中尤为突出：

用户填写了部分表单数据后，点击返回按钮或导航到其他页面
用户查看完其他页面后，再次返回表单页面
此时，之前填写的表单数据已经丢失，用户需要重新填写

要解决这个问题，我们需要结合几种技术：

Vue 的 <keep-alive> 组件，用于缓存组件实例
本地存储（localStorage）保存表单数据
路由导航守卫和生命周期钩子管理缓存数据

解决方案

1. 配置路由以支持组件缓存

首先，我们需要在 Vue Router 配置中为需要缓存的页面添加 keepAlive 标志：

javascript 复制代码

const routes = [
  // ...
  {
    path: '/form-page',
    name: 'FormPage',
    component: () => import('./views/FormPage.vue'),
    meta: {
      title: '表单页面',
      keepAlive: true, // 标记该组件需要被缓存
    },
  },
  // ...
]

2. 在 App.vue 中配置 keep-alive

接下来，我们需要在 App.vue 中使用 <keep-alive> 组件来缓存页面：

html 复制代码

<template>
  <div id="app">
    <router-view v-slot="{ Component, route }">
      <!-- 使用 keep-alive 缓存标记了 keepAlive 的组件 -->
      <keep-alive :max="5"> <!-- 最多缓存5个组件 -->
        <component v-if="route.meta.keepAlive" :is="Component" :key="route.name"></component>
      </keep-alive>

      <!-- 不缓存的组件正常渲染 -->
      <component v-if="!route.meta.keepAlive" :is="Component" :key="route.name"></component>
    </router-view>
  </div>
</template>

3. 创建表单缓存工具

为了方便管理表单数据的缓存，我们可以创建一个通用的表单缓存工具：

javascript 复制代码

// utils/form-cache.js

/**
 * 保存表单数据到localStorage
 * @param {string} key - 缓存的唯一标识符
 * @param {Object} data - 要缓存的表单数据
 */
export function saveFormData(key, data) {
  if (!key) return;
  try {
    window.localStorage.setItem(key, JSON.stringify(data));
  } catch (error) {
    console.error('保存表单数据失败:', error);
  }
}

/**
 * 从localStorage获取表单数据
 * @param {string} key - 缓存的唯一标识符
 * @returns {Object|null} - 返回缓存的表单数据，如果没有则返回null
 */
export function getFormData(key) {
  if (!key) return null;
  try {
    const data = window.localStorage.getItem(key);
    return data ? JSON.parse(data) : null;
  } catch (error) {
    console.error('获取表单数据失败:', error);
    return null;
  }
}

/**
 * 清除localStorage中的表单数据
 * @param {string} key - 缓存的唯一标识符
 */
export function clearFormData(key) {
  if (!key) return;
  try {
    window.localStorage.removeItem(key);
  } catch (error) {
    console.error('清除表单数据失败:', error);
  }
}

/**
 * 生成缓存key
 * @param {string} prefix - 前缀
 * @param {string} id - 唯一ID，通常是订单ID或页面标识
 * @returns {string} - 返回拼接后的key
 */
export function generateCacheKey(prefix, id) {
  return `${prefix}_${id}`;
}

/**
 * 恢复表单数据到目标对象
 * @param {Object} target - 目标对象，通常是表单状态
 * @param {Object} sourceData - 源数据，通常是从localStorage获取的数据
 */
export function restoreFormData(target, sourceData) {
  if (!target || !sourceData) return;
  
  // 只复制target中已有的属性，避免污染对象
  Object.keys(target).forEach(key => {
    if (sourceData.hasOwnProperty(key)) {
      target[key] = sourceData[key];
    }
  });
}

4. 在表单组件中实现数据缓存

现在，我们可以在表单组件中使用这些工具函数来实现数据缓存：

html 复制代码

<script setup>
import { computed, reactive, ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { saveFormData, getFormData, clearFormData, generateCacheKey, restoreFormData } from '@/utils/form-cache'

const route = useRoute()
const router = useRouter()

// 生成当前表单的缓存key，可以基于路由参数或其他唯一标识
const formCacheKey = computed(() => generateCacheKey('my_form', route.params.id || 'default'))

// 表单状态
const formState = reactive({
  field1: '',
  field2: '',
  // 其他表单字段...
})

// 是否已提交表单
const submitting = ref(false)

// 保存表单数据到缓存
const saveFormToCache = () => {
  try {
    // 仅缓存关键表单字段，避免缓存过多数据
    const cacheData = {
      field1: formState.field1,
      field2: formState.field2,
      // 其他需要缓存的字段...
    }
    saveFormData(formCacheKey.value, cacheData)
    console.log('表单数据已缓存', formCacheKey.value)
  } catch (error) {
    console.error('缓存表单数据失败:', error)
  }
}

// 从缓存中恢复表单数据
const restoreFormFromCache = () => {
  try {
    const cachedData = getFormData(formCacheKey.value)
    if (cachedData) {
      // 恢复数据到formState
      restoreFormData(formState, cachedData)
      console.log('表单数据已从缓存恢复', formCacheKey.value)
    }
  } catch (error) {
    console.error('恢复表单数据失败:', error)
  }
}

// 离开路由前保存表单数据
onBeforeRouteLeave((to, from, next) => {
  // 如果不是提交表单后离开页面，则缓存数据
  if (!submitting.value) {
    saveFormToCache()
  }
  next()
})

// 在组件挂载时尝试从缓存恢复数据
onMounted(() => {
  restoreFormFromCache()
})

// 在组件卸载时，如果已提交表单，则清除缓存
onUnmounted(() => {
  if (submitting.value) {
    clearFormData(formCacheKey.value)
  }
})

// 表单提交成功后清除缓存
const handleSubmitSuccess = () => {
  submitting.value = true
  clearFormData(formCacheKey.value)
  // 可以添加其他提交成功后的逻辑
}

// 表单提交处理
const handleSubmit = () => {
  // 表单验证和提交逻辑...
  
  // 提交成功后调用
  submitForm(formState).then(() => {
    handleSubmitSuccess()
    // 其他成功处理...
  }).catch(error => {
    // 错误处理...
  })
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <!-- 表单字段 -->
  </form>
</template>

进阶技巧

处理大量数据

当需要缓存的表单数据较大时，可以考虑以下方法：

选择性缓存：只缓存重要字段，特别是用户已经输入的字段
压缩数据：使用压缩算法减少存储空间
分块存储：将大数据分成多个小块存储

缓存超时

为了避免缓存数据过期或占用存储空间，可以实现一个带超时的缓存机制：

javascript 复制代码

export function saveFormDataWithExpiry(key, data, ttl = 3600000) { // 默认1小时过期
  const item = {
    value: data,
    expiry: Date.now() + ttl
  };
  localStorage.setItem(key, JSON.stringify(item));
}

export function getFormDataWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
  
  const item = JSON.parse(itemStr);
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

支持多种存储方式

可以扩展存储策略，支持 sessionStorage、IndexedDB 或自定义存储：

javascript 复制代码

export function createFormCache(storageType = 'localStorage') {
  const storage = {
    localStorage: {
      set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
      get: (key) => {
        const value = localStorage.getItem(key);
        return value ? JSON.parse(value) : null;
      },
      remove: (key) => localStorage.removeItem(key)
    },
    sessionStorage: {
      set: (key, value) => sessionStorage.setItem(key, JSON.stringify(value)),
      get: (key) => {
        const value = sessionStorage.getItem(key);
        return value ? JSON.parse(value) : null;
      },
      remove: (key) => sessionStorage.removeItem(key)
    },
    // 可以添加其他存储策略...
  }[storageType];

  return {
    save: (key, data) => storage.set(key, data),
    get: (key) => storage.get(key),
    clear: (key) => storage.remove(key)
  };
}

// 使用
const formCache = createFormCache('sessionStorage');
formCache.save('my_key', { data: 'value' });

实际应用案例

在一个租车应用中，我们实现了取车/还车表单的数据缓存功能。当用户填写取车表单后，可能需要临时查看车辆信息或其他订单详情，然后再返回继续填写。通过这种缓存机制，用户返回时能看到之前填写的所有数据，包括选择的取车时间、车辆公里数、油量和上传的验车照片等。

以下是取车页面相关的关键代码：

javascript 复制代码

// 路由配置
{
  path: '/order/pickup',
  name: 'OrderPickUp',
  component: () => import('./views/order/pickup.vue'),
  meta: {
    title: '取车',
    keepAlive: true,
  },
}

// 取车页面组件中
const formCacheKey = computed(() => generateCacheKey('order_pickup_form', route.query.id))

// 保存表单数据到缓存
const saveFormToCache = () => {
  try {
    const cacheData = {
      prTime: formState.prTime,
      mileage: formState.mileage,
      oilLiter: formState.oilLiter,
      // 其他表单字段...
    }
    saveFormData(formCacheKey.value, cacheData)
  } catch (error) {
    console.error('缓存表单数据失败:', error)
  }
}

// 离开路由前保存表单数据
onBeforeRouteLeave((to, from, next) => {
  if (!submitting.value) {
    saveFormToCache()
  }
  next()
})

// 表单提交成功后清除缓存
const handleSubmitSuccess = () => {
  submitting.value = true
  clearFormData(formCacheKey.value)
}

最佳实践总结

组合使用多种缓存机制 ：结合 Vue 的 <keep-alive> 和 localStorage 等本地存储，实现更可靠的缓存策略
选择性缓存：只缓存必要的表单字段，避免存储过多不必要的数据
及时清理缓存：提交表单成功后立即清除缓存，避免下次进入页面时显示过期数据
优雅降级：添加适当的错误处理，确保缓存操作失败不会影响用户体验
考虑隐私和安全：不要缓存敏感信息，如果必须缓存，考虑加密处理
缓存过期机制：为缓存数据设置合理的过期时间，避免长期占用存储空间
渐进增强：首先确保基本功能正常工作，再逐步添加缓存功能，确保兼容性

结论

在 H5 应用中实现路由回退表单数据缓存是提升用户体验的重要手段。通过合理设计和实现，我们可以让用户在多页面之间导航时保持表单数据的连续性，减少重复输入的麻烦，从而提高用户满意度和转化率。

本文介绍的方案已经在多个实际项目中得到应用和验证，证明了其有效性和实用性。希望这些经验和代码能够帮助到更多的开发者，在自己的 H5 应用中实现更好的用户体验。