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

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 天哉 秋凡 简

要回复文章请先登录注册

DCloud_heavensoft

DCloud_heavensoft (作者)

回复 1***@qq.com :
uni-app里只有HTML支持cookie,vue和nvue不支持cookie。另外注意跨域问题,本地代码写的cookie和服务器代码种的cookie是跨域的
2018-11-19 20:42
1***@qq.com

1***@qq.com

cookie是要怎么用呢?打包之后cookie取到的全是空,存cookie是为了使用畅言
2018-11-19 18:59
m***@163.com

m***@163.com

回复 大前端小王子 :
你创建的websql 在app内可以取出db文件吗
2018-11-08 17:33
7***@qq.com

7***@qq.com

websql跨页面数据都被清空了怎么解决啊
2018-09-18 12:44
勇敢的心_

勇敢的心_

好文章,收藏一哈
2018-07-06 09:36
8***@qq.com

8***@qq.com

回复 DCloud_heavensoft :
ios会清理websql,这个就说为什么需要sqlite的原因
2018-06-29 14:25
1***@qq.com

1***@qq.com

内容整理的很好,赞一个
2018-05-31 13:59
大前端小王子

大前端小王子

你好,请问如果websql超出50M会发生什么事?因为目前我设置的app是10M然后我想做超出10M的判断,做超出删除操作。已经实现了超出删除的功能,但是不知道怎么识别>超出10M的判断 请大神指点迷津
2018-05-07 15:04
463473243

463473243

填坑,如果是打包ios app包的同学,请使用HTML5Plus扩展方案。IOS系统存储空间很少的时候,系统会清理 cookie、localstorage、sessionstorage、websql、indexedDB 的数据。
2018-04-17 22:33
ccjuice

ccjuice

回复 DCloud_heavensoft :
好哒好哒,谢谢啦~~~\(@^0^@)/
2017-12-21 15:43