DCloud_heavensoft
DCloud_heavensoft
  • 发布:2015-02-03 06:02
  • 更新:2023-03-08 17:09
  • 阅读:264010

App/uni-app离线本地存储方案

分类:HTML5+

5+App的离线存储

HTML5+的离线本地存储有如下多种方案:
HTML5标准方案:cookie、localstorage、sessionstorage、websql、indexedDB
HTML5Plus扩展方案:plus.navigator.setCookie、plus.storage、plus.io、plus.sqllite

  • cookie(标准h5方案)
    体量最小,可以设置过期时间。不能跨域。
  • localstorage(标准h5方案)
    适合key、value键值对的存储,数据量一般不超过5M。是常用的轻量数据存储方案。不能跨域。
  • sessionstorage(标准h5方案)
    也是键值对,特点是关闭App就消失了,也不能跨webview,一般不用于持久化数据保存。
  • websql(标准h5方案)
    是手机端关系型数据库,各种手机都支持。注意iOS8、9的wkWebview不支持websql。如果要在iOS8、9上使用websql,请使用uiwebview内核。
  • indexedDB(标准h5方案)
    是HTML5里最新的数据存储规范,但不是基于SQL,而是基于对象。
    indexedDB性能更高,全是异步处理,学习难度偏大。最重要的是目前手机端支持度不行。Android4.4以上和iOS8以上才支持indexedDB。
  • plus.navigator.setCookie
    与HTML5的标准cookie相比,plus的扩展主要是为了跨域。所谓跨越,就是本地HTML页面和服务器HTML页面共享cookie数据,或者说本地页面的js可以操作服务器页面产生的cookie。如果没有跨越需求,不需要使用plus扩展。注意iOS8以后的wkWebview不支持setcookie。
  • plus.storage
    plus.storage也是键值对数据存储。它是把OS给原生App使用的键值对存储数据库封装一层给JS使用。
    plus.storage没有理论上的大小限制。也是持久化的,不会被当做缓存清理。
    plus.storage相比于localstorage 还有一个特点是可跨域。当一个存储数据,需要被本地和来自服务器的页面同时读写时,就涉及跨域问题。此时HTML5的localstorage不能满足需求,只能使用plus.storage。
    plus.storage操作要比localstorage慢几十毫秒,尤其是在循环里调用plus api会放大这种慢。
    有网友封装了一个框架,针对key-value数据,在localstorage超过5m时自动切换到plus.storage,参考http://ask.dcloud.net.cn/article/552。虽然这么做听起来有点复杂,但我们对这种追求性能极致的开发者非常赞赏。
  • plus.io
    plus.io是文件读写,虽然也可以通过读写txt等文件存储数据,但并不如专业的storage和websql方便。
    plus.io更多的是用于图片等多媒体文件的本地保存。
    比如图文列表的离线使用,一般有2种做法:
    1. 图片下载不通过img的src,而是plus.dowload下载的,先下载图片,存好路径后,然后img的src动态指定文件路径
    2. 图片使用img的src下载,然后用canvas把img存成图片文件。下次不联网,img的scr直接指向本地文件
  • plus.sqllite
    plus.sqllite是对原生的sqllite的封装。它也是一种可以通过sql在本地增删改查数据库的方案。
    有点类似websql,但相对于websql而言,sqllite的好处是:
    1. 可以预置基础数据库,直接打包到app里
    2. 当手机空间不足时,websql可能会被清理,而sqllite不会。
      plus.storage没有理论上的大小限制。

有人问三方清理工具清理垃圾会不会造成某些数据丢失,这个可能性是存在的,但概率并不高,取决于清理软件会不会分析你的存储数据里哪些是可以清除的垃圾数据。除了OS的清理工具外,一般没有root权限的清理工具是拿不到除了plus.io外的你的app的存储数据的。
但ios上系统存储空间很少的时候,系统会清理 cookie、localstorage、sessionstorage、websql、indexedDB 的数据,此时使用plus.storage、plus.sqllite更安全。

uni-app存储

uni-app的存储方案比5+app要少,因为cookie、localstorage、sessionstorage、websql、indexedDB只有h5端支持,其他端都不支持。
uni.storage的键值对存储,这个是全端支持的。
uni-app的Storage在不同端的实现不同,uni.storage在app侧,映射为plus.storage;h5侧映射为localstorage;各个小程序平台映射为其自带的storage键值对存储:

  • H5端为localStorage,浏览器限制5M大小,是缓存概念,可能会被清理
  • App端为原生的plus.storage,无大小限制,不是缓存,持久化
  • 各个小程序端为其自带的storage api,数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。
  • 微信小程序单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
  • 支付宝小程序单条数据转换成字符串后,字符串长度最大200*1024。同一个支付宝用户,同一个小程序缓存总上限为10MB。
  • 百度、头条小程序文档未说明大小限制

app端还支持2种方案

74 关注 分享
多串君 穿布鞋的coder 一个小凌乱 zhoushp_cn Eric_Guo candice CKHan 可可西里 Family cbi168 龙七 明峰 蔡繁荣 小蚂蚁 盘龍 ming300 shwanYu 光辉岁月0 ParetoOu MooGu 时光可见 8***@qq.com Trust 包卉 雪之梦技术驿站 绝云气 1***@qq.com 云流音 1***@qq.com skysowe android_yang xiaoxiyao ruogu x***@vip.qq.com 8***@qq.com mlm8368 勇敢的心_ Zerounary 干锅少年 偶是小菜鸟 s***@163.com 3***@qq.com 8***@qq.com h***@foxmail.com mxui803 1***@qq.com lobtao 天哉 秋凡 简

要回复文章请先登录注册

2***@qq.com

2***@qq.com

回复 DCloud_heavensoft :
我把用户数据用uni.getStorageSync存储在一个键里面会不会有性能、大小、安全等问题
2019-09-20 14:49
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 3***@qq.com :
Hello H5+是5+app,新建项目选5+app类型可见
2019-04-27 17:43
s7team丶杰克

s7team丶杰克

检查一下内容,sqllite,这里是指sqllite吗?plus.storage没有理论上的大小限制。
2019-04-27 04:19
3***@qq.com

3***@qq.com

回复 DCloud_heavensoft :
你好,大佬,我看 最新发布的 1.9.3.20190422 版本 说有 “Hello H5+ 新增 数据库(SQLite)操作示例页面”,实例页面是放在哪里? hello-uniapp 里面还是 插件市场? 我都找不到 0>0
2019-04-23 09:56
2***@qq.com

2***@qq.com

解决了 是我自己的问题 我给游标没设置成F 所以重复了不能存储
2019-04-15 16:33
2***@qq.com

2***@qq.com

兄弟啊 我听你的 用了indexedDB 但是巨坑的来了 为什么当我数据量多到一定程度的时候就有限制了 好像每一次只能存一定量大小的数据啊 ?能解释一下么?我去查询API文档人家说没有限制 是不是你们平台限制了每次存储的量啊?这个东西在哪能设置找到?
2019-04-15 15:52
4***@qq.com

4***@qq.com

说了半天 在uni-app中怎么调用plus.sqlite 能有个例子吗?
2019-04-15 15:34
A***@qq.com

A***@qq.com

plus.storage存储的数据,在 ios 和 android 原生代码中如何读写
2019-04-04 02:42
rem486

rem486

留用
2019-01-26 17:40
快乐学习生

快乐学习生

⛄️⛄️⛄️⛄️
2018-11-19 22:17