[轉]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();