[转]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 从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-25websql_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();