uniApp离线数据不丢失方案

1. 数据分类存储

  • 表单类数据 (定位坐标、偏差理由文字、打卡时间等结构化字段):用 uni.setStorageSync 存成JSON对象,体积小,直接存没问题
  • 图片类数据 :拍照后不直接转Base64存Storage(Storage一般有单条几MB的容量限制,图片转Base64体积还会膨胀约33%,容易超限)。更合理的做法是用 uni.saveFile 把临时拍摄的图片保存到本地文件系统的持久化路径 ,Storage里只存这个文件的本地路径,减轻Storage的存储压力

2. 维护一个"待提交队列"

javascript 复制代码
// 队列结构示例
{
  queue: [
    {
      id: 'temp_001', // 本地临时ID
      type: 'inspection_record',
      data: { location: {...}, reason: '定位偏差原因', photoPath: 'xxx' },
      status: 'pending', // pending | submitting | failed
      createTime: 1234567890
    }
  ]
}

每次用户在无网环境下提交一条记录,不直接发请求,而是追加进这个队列,存进Storage。

3. 监听网络恢复,触发队列处理

javascript 复制代码
uni.onNetworkStatusChange((res) => {
  if (res.isConnected) {
    processOfflineQueue(); // 网络恢复,处理待提交队列
  }
});

async function processOfflineQueue() {
  const queue = uni.getStorageSync('offline_queue') || [];
  for (const item of queue) {
    if (item.status === 'pending') {
      try {
        item.status = 'submitting';
        await submitToServer(item.data); // 真正发请求
        // 提交成功,从队列移除
        removeFromQueue(item.id);
      } catch (err) {
        item.status = 'failed'; // 失败保留,下次再试
      }
    }
  }
  uni.setStorageSync('offline_queue', queue);
}

4. 用户侧的感知设计(对应你提到的"提醒用户补充完整信息")

  • 网络恢复后,弹一个轻提示:"检测到N条离线记录,正在为您同步",同步完成再提示"同步成功"
  • 如果某条记录一直提交失败(比如数据本身有问题),做一个**"待同步"角标/列表**,让用户能主动查看、手动处理,而不是无声无息地一直失败

总结

"网络不好的情况下,我们会把数据先存到本地------结构化的表单数据用uniapp的本地存储API直接存,拍摄的照片存到本地文件系统,避免Storage空间不够。同时维护一个待提交队列,每条离线数据先进队列、标记为待提交状态。通过uniapp的网络状态监听API,检测到网络恢复后,自动遍历队列逐条重新提交,成功了从队列移除,失败了保留、下次再重试。用户侧会有提示,比如网络恢复时弹窗告知有几条数据正在同步,避免用户不知情。另外像定位偏差这种字段,我们也会让用户手动补充偏差原因,保证数据的可追溯性。"


相关推荐
LRL_6 分钟前
跨平台 Node 模块安装指南:如何利用 pnpm/npm 配置`supportedArchitectures` 锁定平台依赖
前端·npm·node.js
EatFan19 分钟前
React 项目踩坑实录:useEffect 闭包陷阱、Context 性能陷阱与 React 18 升级避坑排查手册
前端·javascript·react.js·react·react hooks·useeffect·闭包陷阱
风骏时光牛马1 小时前
企业业务运营信息数据库
前端
IT_陈寒1 小时前
Vue的数组更新把我坑惨了
前端·人工智能·后端
于航2 小时前
分层上下文压缩,幻觉检测,错误累积概要
前端
数据掘金2 小时前
鸿蒙统计的权限弹窗怎么适配?
前端
数据掘金2 小时前
鸿蒙统计的多设备协同数据怎么打通?
前端
尘中远2 小时前
Qwt7的曲线渲染平滑实现:高斯卷积、Savitzky-Golay 回归与特征保护
前端
Fly3 小时前
我来提需求,你带着 Codex 做项目:AI 全栈课程开始实战了
前端
集智飞行3 小时前
解决mavros2 ros2版本cpu占用高的问题
java·服务器·前端