345  
查询码:00000839
5+App的离线存储1
作者: 朱凡 于 2019年12月31日 发布在分类 / FM组 / FM_App 下,并于 2019年12月31日 编辑
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,

plus.io

plus.io是文件读写,虽然也可以通过读写txt等文件存储数据,但并不如专业的storage和websql方便。
plus.io更多的是用于图片等多媒体文件的本地保存。
比如图文列表的离线使用,一般有2种做法:
图片下载不通过img的src,而是plus.dowload下载的,先下载图片,存好路径后,然后img的src动态指定文件路径
图片使用img的src下载,然后用canvas把img存成图片文件。下次不联网,img的scr直接指向本地文件

plus.sqllite

plus.sqllite是对原生的sqllite的封装。它也是一种可以通过sql在本地增删改查数据库的方案。
有点类似websql,但相对于websql而言,sqllite的好处是:可以预置基础数据库,直接打包到app里,当手机空间不足时,websql可能会被清理,而sqllite不会。
plus.storage没有理论上的大小限制。

ios上系统存储空间很少的时候,系统会清理 cookie、localstorage、sessionstorage、websql、indexedDB 的数据,此时使用plus.storage、plus.sqllite更安全。

H5端为localStorage,浏览器限制5M大小,是缓存概念,可能会被清理

App端为原生的plus.storage,无大小限制,不是缓存,持久化

代码示例如下部分:

......

/*离线存储*/
var myStorageNew = (function myStorageNew() {
var storageNew = null;

var get = function(k) {
      return getItem(k) || getItemPlus(k);
}

var set = function(k, value) {
      value = JSON.stringify({
      data: value
});
k = k.toString();
try {
      window.localStorage.setItem(k, value);
} catch (e) {
       console.log(e);
       //TODO 超出localstorage容量限制则存到plus.storage中
        //且删除localStorage重复的数据
       removeItem(k);
       plus.storage.setItem(k, value);
    }
  }
})

......



 推荐知识

 历史版本

修改日期 修改人 备注
2019-12-31 21:01:44[当前版本] 朱凡 格式调整
2019-12-31 20:59:02 朱凡 修改标题
2019-12-31 20:57:37 朱凡 创建版本

  目录
    知识分享平台 -V 4.8.7 -wcp