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,检测到网络恢复后,自动遍历队列逐条重新提交,成功了从队列移除,失败了保留、下次再重试。用户侧会有提示,比如网络恢复时弹窗告知有几条数据正在同步,避免用户不知情。另外像定位偏差这种字段,我们也会让用户手动补充偏差原因,保证数据的可追溯性。"


相关推荐
代码小学僧1 小时前
从 0 到 1,记录我的第一个出海 SaaS 独立开发项目
前端·rpc·音视频开发
Aaswk1 小时前
从 HTML/CSS/JS 到 Vue + Axios 的一篇实战笔记
前端·css·vue.js·html
IMPYLH1 小时前
HTML 的 <span> 标签
前端·html
计算机魔术师2 小时前
纽约时报诉案曝光:微软高管私下承认,AI抓取是史上最大劳动盗窃
前端
晓得迷路了2 小时前
栗子前端技术周刊第 147 期 - React Router 8.4、Vite 云服务攻击、pnpm 12.4...
前端·javascript·react.js
SEO_juper2 小时前
2026年用Python检测网站薄内容与重复页:用向量相似度找出“搜索引擎眼中一样“的页面(附完整代码)
开发语言·前端·seo·独立站·谷歌优化
IT_陈寒2 小时前
Vite这坑我踩了,说说静态资源加载那些事儿
前端·人工智能·后端
梦曦i2 小时前
uni-app x 0.7.0重磅升级:插件实例化,原生编译彻底打通
前端·uni-app x
开开心心就好2 小时前
C盘空间不够用?一键扫描清理系统垃圾
前端·javascript·安全·支持向量机·语音识别·etcd·模拟退火算法