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

Posted 2020-09-19

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 从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();