[轉]App離線本機存放區方案

標籤：資料丟失   變化   客戶   nbsp   oid   開啟   4.4   服務   架構   

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

[轉]App離線本機存放區方案