App/uni-app 离线本地存储方案有哪些?最推荐的是哪种方案?

以下是 UniApp 离线本地存储方案的详细介绍及推荐方案分析:

一、UniApp 离线本地存储方案分类

1. 基于 uni.storage 系列 API(跨端基础方案)
  • API 及特点
    • 提供 uni.setStorage(异步存储)、uni.getStorage(异步读取)、uni.removeStorage(异步移除) ,以及同步版本 uni.setStorageSyncuni.getStorageSyncuni.removeStorageSyncuni.clearStorageSync(清空存储)。
    • 不同端有不同映射:
      • H5 端:映射为 localStorage ,受浏览器限制,一般单域名下存储大小约 5M ,属于缓存性质,可能因浏览器策略(如清理缓存)被清除 。
      • App 端:映射为 plus.storage (5+App 提供),无官方明确大小限制(实际受设备存储容量影响),是持久化存储,不会因应用重启等丢失数据 。
      • 小程序端:映射为各小程序平台自身的存储 API(如微信小程序 wx.setStorage 等 ),不同平台有容量限制(如微信小程序单 key 最大 1MB、总上限 10MB ),数据生命周期与小程序一致,除非主动删除或超期清理。
  • 适用场景:存储简单键值对数据,像用户登录态标识、简单配置项(如主题选择)、少量离线缓存的业务数据(如用户收藏的简短 ID 列表 )。例如存储用户是否已阅读引导页的标记,用 uni.setStorageSync('hasReadGuide', true) 记录。
2. 文件系统存储(plus.io ,主要用于 App 端 )
  • 原理与能力:通过 5+App 的 plus.io 模块操作本地文件系统,可实现文件的创建、读写、删除、遍历等。能将数据以文件形式(如文本文件、二进制文件)存储在设备本地指定目录。
  • 适用场景
    • 存储较大体积数据,比如离线的图文内容(将文章内容存为 .txt 文件、图片存为本地文件 )。例如新闻类 App 离线缓存多篇文章,把文章文本存成文件,用 plus.io 管理文件路径和读写。
    • 需灵活组织数据结构,或要与原生系统文件交互的场景。比如 App 需缓存一批本地可执行的脚本文件、自定义格式的配置包等。
  • 示例代码(App 端)
// 写入文本内容到本地文件
function writeFile(content) {const path = '_doc/test.txt'; // 本地存储路径,_doc 是 5+App 可读写目录plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {fs.root.getFile(path, {create: true}, function(fileEntry) {fileEntry.createWriter(function(writer) {writer.write(content);console.log('文件写入成功');}, function(err) {console.error('写入失败:', err);});}, function(err) {console.error('获取文件入口失败:', err);});}, function(err) {console.error('请求文件系统失败:', err);});
}
3. 数据库存储(SQLite ,主要用于 App 端 )
  • 实现方式:借助 plus.sqlite 模块(5+App 提供),对原生 SQLite 数据库进行封装,可执行 SQL 语句实现数据的增删改查。也可结合一些数据库 ORM 框架(如 sqlite ORM 类库,需自行适配 UniApp )简化操作。
  • 适用场景
    • 需存储结构化数据,且数据量较大、有复杂查询需求。比如离线存储电商 App 的商品列表(包含商品 ID、名称、价格、库存等字段 ),可通过 SQL 语句快速筛选出某分类下商品。
    • 数据需要预置到 App 中(可将数据库文件打包进 App ,安装后直接使用 ),或者要保证数据在设备空间紧张时更稳定(相比 websql 等,系统清理存储时 SQLite 数据更不容易被清除 )。
  • 示例代码(App 端)
// 打开数据库(不存在则创建)
plus.sqlite.openDatabase({name: 'test.db',path: '_doc/test.db',success: function() {console.log('数据库打开成功');// 创建表plus.sqlite.executeSql({name: 'test.db',sql: 'CREATE TABLE IF NOT EXISTS goods (id INTEGER PRIMARY KEY, name TEXT, price REAL)',success: function() {console.log('表创建成功');},fail: function(err) {console.error('创建表失败:', err);}});},fail: function(err) {console.error('打开数据库失败:', err);}
});
4. 其他 H5 兼容方案(H5 端专属,App/小程序端慎用 )
  • sessionStorage:和 localStorage 类似,但存储数据仅在当前会话(页面关闭即清除 ),UniApp H5 端可使用,适用于临时存储会话级数据,如页面跳转间传递的临时标识 。
  • IndexedDB:H5 端支持的较复杂本地数据库,适合存储大量、复杂结构化数据(如离线的用户行为日志库 ),但手机端系统兼容性欠佳(Android 4.4+、iOS 8+ 才支持 ),且 UniApp 非 H5 端基本不支持,跨端场景下局限性大。
  • websql:H5 端的关系型数据库方案,不过 iOS 8、9 的 wkWebview 不支持,若要用需切换 uiwebview 内核(会损失部分性能和特性 ),现在逐渐被 IndexedDB 替代,UniApp 中较少推荐使用。

二、推荐方案及选择建议

1. 优先推荐方案:uni.storage 系列 API
  • 优势
    • 跨端一致性好:一套 API 适配 H5、App、小程序多端,开发时无需为不同端大量改写存储逻辑 。
    • 使用简单:异步和同步方法灵活选择,满足不同代码执行流程需求(简单场景用同步,避免阻塞则用异步 )。
    • 覆盖常见轻量存储场景:对于大部分 App 的配置信息、用户标识、少量业务缓存等需求,能简洁高效实现。
  • 不足与应对:存储大容量、复杂结构数据能力弱。若有此类需求,结合文件系统存储(App 端用 plus.io )或数据库存储(App 端用 plus.sqlite )补充即可 。
2. 补充方案选择(针对特殊需求 )
  • 需存储大文件/复杂文件结构:选 文件系统存储(plus.io ,手动管理文件读写和路径,适合 App 端离线缓存图片、音频、多文本组合数据等场景 。
  • 需存储结构化大数据、有复杂查询:选 SQLite 数据库存储(plus.sqlite ,用 SQL 语句灵活操作数据,适合 App 端的离线业务数据库场景(如本地商品库、离线订单库 ) 。
  • 仅 H5 端特殊需求:可考虑 IndexedDB(处理 H5 端大量结构化数据 ),但要做好兼容性降级处理,且别期望在 App/小程序端复用 。

综上,日常 UniApp 开发中,优先用 uni.storage 系列 API 满足大部分离线存储需求;遇到 App 端大文件、复杂结构化数据等特殊场景,再补充文件系统或 SQLite 数据库存储方案 。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/pingmian/83891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库系统概论(十七)超详细讲解数据库规范化与五大范式(从函数依赖到多值依赖,再到五大范式,附带例题,表格,知识图谱对比带你一步步掌握)

数据库系统概论(十七)超详细讲解数据库规范化与五大范式(从函数依赖到多值依赖,再到五大范式,附带例题,表格,知识图谱对比带你一步步掌握) 前言一、为什么需要规范化1. 我们先想一个…

交互标牌——视觉货币(数字)转换器项目及源码

一、作品简介 视觉货币(数字)转换器是我为交互标牌创客争霸赛设计的项目,项目的主要功能是能将所见的数字按照设定的公式转换成新的单位量,这里我主要演示的是货币转换,直接将摄像头对准价签,即可显示出转换…

React 第五十四节 Router中useRevalidator的使用详解及案例分析

前言 useRevalidator 是 React Router v6.4 引入的一个强大钩子,用于在数据路由(Data Router)中手动触发路由数据的重新验证(revalidation)。 它在需要主动刷新数据而不改变路由位置的场景中非常有用。 一、useReval…

“一代更比一代强”:现代 RAG 架构的演进之路

编者按: 我们今天为大家带来的文章,作者的观点是:RAG 技术的演进是一个从简单到复杂、从 Naive 到 Agentic 的系统性优化过程,每一次优化都是在试图解决无数企业落地大语言模型应用时出现的痛点问题。 文章首先剖析 Naive RAG 的基…

Flask-SQLAlchemy使用小结

链表查询 join方法允许你指定两个或多个表之间的连接条件,并返回一个新的查询对象,该对象包含了连接后的结果。 内连接 from sqlalchemy import join # 使用join函数 query db.session.query(User, Order).join(Order, User.id Order.user_id) res…

【python与生活】如何构建一个解读IPO招股书的算法?

构建一个基于Python的IPO招股书解读算法需要结合自然语言处理(NLP)技术和大型语言模型(LLM)。以下是一个完整的解决方案,使用LangChain框架和OpenAI的GPT模型: import os import re import pandas as pd f…

LangChain面试内容整理-知识点1:LangChain架构与核心理念

LangChain 是一个用于构建基于大型语言模型(LLM)的应用的框架,其架构采用模块化设计,核心理念是将语言模型与外部工具、数据源相结合,以实现复杂任务的分解与执行medium.com。整个框架可以理解为一系列可组合的组件,包括链(Chain)、智能体(Agent)、工具(Tool)和LLM…

13.MySQL用户管理

13.MySQL用户管理 目录 MySQL用户管理 用户 用户信息创建用户修改用户密码删除用户 数据库的权限 MySQL中的权限给用户授权回收权限 用户 用户信息 MySQL中的用户信息存储在默认数据库mysql的user表中。这个表记录了所有用户的详细信息,包括用户名、登录权限…

分布式Session处理的五大主流方案解析

在分布式环境下,Session 处理的核心挑战是确保用户请求在不同服务器间流转时能保持会话状态一致。以下是主流解决方案及优缺点分析: 🔐 一、集中存储方案(主流推荐) Redis/Memcached 存储 原理:将 Session…

【数据分析】什么是鲁棒性?

引言 —— 为什么我们需要“抗折腾”的系统? 当你乘坐的飞机穿越雷暴区时机体剧烈颠簸,自动驾驶汽车在暴雨中稳稳避开障碍物,或是手机从口袋摔落后依然流畅运行——这些场景背后,都藏着一个工程领域的“隐形守护者”:…

altium designer2024绘制stm32过程笔记x`

学习视频:【Altium Designer 1小时(貌似不够)速成(可能不止一小时*~* 但我觉得仨小时肯定够了---来自up猪的自信!!)】https://www.bilibili.com/video/BV17E411x7dR?p2&vd_sourcea756421e0aaa64b2bba352eabfa26ed…

Java 类型参数 T、R 、 O 、K、V 、E 、? 区别

在 Java 泛型和函数式编程中,T、R 和 O 都是类型参数(Type Parameters),它们的主要区别在于命名约定和上下文含义,而不是语言层面的区别。它们可以互换使用,但通常遵循一定的命名习惯以提高代码可读性。 1.…

Komiko 视频到视频功能炸裂上线!

Komiko 平台作为行业的创新先锋,近日宣布推出全新的视频到视频(Video-to-Video)功能,这一举措犹如一颗重磅炸弹,瞬间在漫画、动画和插画创作的世界里掀起了惊涛骇浪,进一步巩固了其作为 AI 驱动的一体化创作…

Protobuf 中的类型查找规则

a.proto syntax "proto2"; //protoc3生成代码兼容proto2语法 package pkgA; message Example { }ba.proto package pkgB.pkgA; message Example { }b.proto syntax "proto3"; //protoc3生成代码兼容proto2语法 package pkgB; import "test1/a.pr…

KMeans 算法深度解析:从原理到实战

一、算法概述:无监督学习的聚类利器​ 在机器学习的无监督学习领域,聚类算法是探索数据内在结构的重要工具。KMeans 算法作为划分式聚类的代表,因其简单高效的特性,成为数据科学家工具箱中的必备技能。该算法通过将 n 个数据点划…

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端(即页面 JS / Web UI)与客户端(C 后端)的交互机制,是 Chromium 架构中非常核心的一环。下面我将按常见场景,从通道、流程、技术栈几个角度做一套完整的分析,特别适合你这种在分析和改…

Server2003 B-1 Windows操作系统渗透

任务环境说明: 服务器场景:Server2003(开放链接) 服务器场景操作系统:Windows7 1.通过本地PC中渗透测试平台Kali对服务器场景Windows进行系统服务及版本扫描渗透测试,并将该操作显示结果中Telnet服务对应的…

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…

使用React+ant Table 实现 表格无限循环滚动播放

数据大屏表格数据&#xff0c;当表格内容超出&#xff08;出现滚动条&#xff09;时&#xff0c;无限循环滚动播放&#xff0c;鼠标移入暂停滚动&#xff0c;鼠标移除继续滚动&#xff1b;数据量小没有超出时不需要滚动。 *使用时应注意&#xff0c;滚动区域高度父元素高度 - 表…

机器人现可完全破解验证码:未来安全技术何去何从?

引言 随着计算机视觉技术的飞速发展&#xff0c;机器学习模型现已能够100%可靠地解决Google的视觉reCAPTCHAv2验证码。这标志着一个时代的结束——自2000年代初以来&#xff0c;CAPTCHA&#xff08;"全自动区分计算机与人类的图灵测试"的缩写&#xff09;一直是区分…