[转]App离线本地存储方案

App离线本地存储方案

初稿地址:http://ask.dcloud.net.cn/article/166

 

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

  • cookie
    体量最小,可以安装过时。无法跨域。
  • localstorage
    切合key、value键值对的蕴藏,数据量一般不超过5M。是常用的轻量数据存储方案。不可知跨域。
  • sessionstorage
    也是键值对,特点是倒闭App就没有了,也非可以跨webview,一般不用于持久化数据保存。
  • websql
    举凡手机端关系项目数据库的特等方案,各个手机还协理。只是该规范不再更新。不过近来手机端重量数据存储的唯一可商用方案。
  • indexedDB
    凡HTML5里时的数量存储规范,但未是因SQL,而是遵照对象。
    indexedDB性能更胜似,全是异步处理,学习难度偏大。最根本的凡时手机端帮忙过杀。Android4.4以上以及iOS8之上才支撑indexedDB。
  • plus.navigator.setCookie
    同HTML5的专业cookie相比,plus的扩展重假若为跨域。所谓跨,就是本地HTML页面和服务器HTML页面共享cookie数据,或者说地面页面的js可以操作服务器页面暴发的cookie。如若没过需求,不需利用plus扩张。
  • plus.storage
    plus.storage也是键值对数码存储。它是将OS给原生App使用的键值对存储数据库封装一重叠为JS使用。
    plus.storage没有反驳及之尺寸限制。
    plus.storage相比较于localstorage
    还有一个特征是只是跨域。当一个囤数据,需要让地点与来服务器的页面同时读写时,就涉及跨域问题。此时HTML5的localstorage不克满意要求,只可以利用plus.storage。
    plus.storage操作要于localstorage慢几十皮秒,假诺不是坐大小限制依旧过,尽量拔取localstorage。
    发网友封装了一个框架,针对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直接指向本地文件

有人提问原生的sqllite是否可用,5+里没有包装,推荐以HTML5正经的数据库。
再有人口咨询也底不封装sqllite?因为HTML5已经有矣,HTML5+规范不能还立项。
HTML5+从属于w3c指引下的联盟,DCloud也是w3c会员,重复发明轮子没利益,只晤面增多工作量及叠加包体积。

有人提问三正值清理工具清理垃圾会不会晤促成一些数据丢失,这一个可能是存在的,但概率并无高,取决于清理软件会无相会分析你的储存数据里安是好祛除的杂质数据。除了OS的清理工具外,一般没有root权限的清理工具是以不交除了plus.io外的你的app的仓储数据的。

 

 


 

自己个人见解:(by刘涛 qq30234923 2016-09-27)

localStorage 速度快,但容量小 2~5M,适合 跨页
参数传递,保留少量数量(文本和多少图) 等
localStorage 有个吃人忽略的好好性状,
假如你的先后用以不同页面访问和一个价值(localStorage键值),需要了解是价是否曾为此外页面改变,可通往浏览器注册storage事件来实现

window.addEventListener(‘storage’, function(e) {
console.log(e.key + “‘s value is changed from ‘”+ e.oldValue + “‘ to ‘”

  • e.newValue + “‘ by ” + e.url);
    }, false); 

//A页面 
localStorage[‘foo’] = ‘bar’; 

//B页面 
localStorage[‘foo’] = ‘newBar’; 

好据此来网页端实现 im , 推送 等等,好处大大的

indexedDB 代码开发及 相比较反人类,关联查询 多规格查询
处理困难,需要绕道实现,妥妥的nosql范,在
某些浏览器上爆发容量限制,大多数非限量,我向来不实际测试了。

websql(sqlite) 就非凡融洽了,w3c
从二零一零年就不珍视其了,是坐她从不啥好保障的,就是sqlite的松开而已。sqlite已经很熟,你总不至于期望
一个内置数据库及 oracle 的效率吧,不克将 夏利 当 玛莎拉(Zara)蒂来开。我当浏览器客户端塞了成百上千兆的数据,没毛病。

base64 是独好东西,对象文本化,加密
妥妥的,但是大了三分之一底体积,毛毛雨了。

下这些措施较好,我以为倘诺同自身的(websql 模仿 localStorage
方案)配合,则堪称完美,且过平台 不需要基座,存个几十预示没问题。
html5 在本地存储保存图片以及文件
http://www.tuicool.com/articles/fiYJry

从而自己的理念是: localStorage + websql + base64 +
html5地面存储保存图片以及文件 + mui(或5+) = 肖奈(前端的小倾城)

 

 

 ———————————————————————

 

 

花: HTML5 用 websql 模仿 localStorage 几乎无大小限制,比localStorage和plus.storage更加实用 by 刘涛

 

2016-09-25

websql_localStorage_liutao.js: 用 websql 模仿 localStorage 无大小限制

websql操作来自网上资料,经过增强改进 , by liutao qq 30234923
数据库操作辅助类,定义对象、数据操作方法都在这里定义


表 kv 三个字段: (k,v,更新时间)
以下 kv 函数 会自动打开 数据库,建表 等等,简单调用即可
注意 websql 为异步,你不能指望 setItem 后,下一句立刻就可以获取 变化后 的值。须在 回调函数 中继续下一句

1.
websql_exesql('delete from kv where k=?', ['小红']); // ['小红','a','b']
websql_exesql(' delete from kv where k=\'小红\'; ');
websql_exesql('CREATE INDEX IF NOT EXISTS idx_kv_k ON kv(k);');
websql_exesql('CREATE INDEX IF NOT EXISTS idx_kv_k ON kv(k);', [], function(){
alert('搞定');
});


2.
websql_localStorage_getItem('小红', function(k,v,更新时间,此k记录数){
alert( '\n' + k + '\n\n' + v + '\n\n' + 更新时间 );

if( 此k记录数 > 1 )
alert('不正常但未错: websql_localStorage_getItem: k=['+ k +'], 此k对应的记录数 = ' + 此k记录数);
});

3.
websql_localStorage_setItem('小红', '嘿嘿嘿4');
websql_localStorage_setItem('小红', '嘿嘿嘿3', function(k,v,更新时间){
alert( '\n' + k + '\n\n' + v + '\n\n' + 更新时间 );
});

4.
websql_localStorage_removeItem('小红');
websql_localStorage_removeItem('小红', function(k){
alert( '\n' + k + '\n\n' );
});

5.
websql_localStorage_length( function(length){
alert( '\n websql_localStorage_length = ' + length + '\n\n' );
});

6.
websql_localStorage_clear();
网站地图xml地图