[转]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种做法:- 图片下载不通过img的src,而是plus.dowload下载的,先下载图片,存好路径后,然后img的src动态指定文件路径
- 图片使用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 从2010年就不维护它了,是因为它没啥好维护的,就是sqlite的嵌入而已。sqlite已经很成熟,你总不至于期望 一个嵌入数据库达到 oracle 的效能吧,不能把 夏利 当 法拉利 来开。我在浏览器客户端塞了上百兆的数据,没毛病。
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();
[转]App离线本地存储方案的更多相关文章
- [转]Dcloud App离线本地存储方案
原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localstorage.session ...
- ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)
首先声明,本教程参考国外网站(http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/) ...
- [转]ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)
本文转自:http://www.cnblogs.com/ailen226/p/ionic.html 首先声明,本教程参考国外网站(http://gonehybrid.com/how-to-use-po ...
- htm5本地存储方案——websql的封装
一.websql 简介 在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的 ...
- Android本地存储方案 SharedPreferences
原文地址:http://www.yanwushu.com/post/43.html 存储位置 SharedPreferences数据保存在: /data /data/<package_name& ...
- htm5本地存储方案——indexdb的封装
不BB直接上代码 /*封装IndexdDB*/ var localDatabase = { }; localDatabase.dbName = "yiliDB"; localDat ...
- JavaScript本地存储实践(html5的localStorage和ie的userData)
http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日 ...
- 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)
来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...
- web前端实现本地存储
当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...
随机推荐
- .NET开源工作流RoadFlow-表单设计-数据表格
数据表格即在表单中显示一个table,该table数据可以来自任意自定义的来源: 数据类型:指定表格的数据源类型 1.datatable,即.net中的System.Data.DataTable 2. ...
- Android 自定义View实现SegmentControlView(自定义多样式tablayout)
偷懒一下,不做过多阐述 参考资源: Android 自定义View实现SegmentControlView : https://blog.csdn.net/a512337862/article/det ...
- 深度语义匹配模型-DSSM 及其变种
转自:http://ju.outofmemory.cn/entry/316660 感谢分享~ DSSM这篇paper发表在cikm2013,短小但是精炼,值得记录一下 ps:后来跟了几篇dssm的pa ...
- Java Android 32位16位 MD5加密
// md5加密 32位小写 private String Md5(String sourceStr) { String result = ""; try { MessageDig ...
- springboot(服务端接口)获取URL请求参数的几种方法
原文地址:http://www.cnblogs.com/xiaoxi/p/5695783.html 一.下面为7种服务端获取前端传过来的参数的方法 常用的方法为:@RequestParam和@Req ...
- [BJWC2008]秦腾与教学评估
嘟嘟嘟 二分好题. 怎么二分呢?反正我是没想出来. 看了题解. 因为只有一个为奇数的点,所以对于一个位置x,求出区间[0, x]的教总和,如果为奇数,说明x取大了:否则x取小了(妙啊). 虽然答案在i ...
- sqlite简单笔记
五种约束需要注意的地方 1.自增使用:autoincrement 2.约束必须进行后面处理:unique(字段[多个可以以逗号分开]) 3.外键必须放后面:foreign key(字段引用) refe ...
- 【luogu P3371 单源最短路】 模板 vector+SPFA
stl真是好,,偷懒少写邻接表,, 两个STL应用使代码简短了很多.然而还是那句话,天上不会掉馅饼,程序的效率还是有所下降的.然而,效率不是全部,人们宁可牺牲三倍效率用Java而不用C语言就是最好的例 ...
- android:TableLayout表格布局详解
http://blog.csdn.net/justoneroad/article/details/6835915 这篇博文包括的内容:1.TableLayout简介2.TableLayout行列数的确 ...
- HDU 2005 第几天?(闰年判断)
传送门: acm.hdu.edu.cn/showproblem.php?pid=2005 第几天? Time Limit: 2000/1000 MS (Java/Others) Memory L ...