App/uni-app離線本地存儲方案

5+App的離線存儲

HTML5+的離線本地存儲有如下多種方案：
HTML5標準方案：cookie、localstorage、sessionstorage、websql、indexedDB
HTML5Plus擴展方案：plus.navigator.setCookie、plus.storage、plus.io、plus.sqllite

• cookie（標準h5方案）
  體量最小，可以設置過期時間。不能跨域。
• localstorage（標準h5方案）
  適合key、value鍵值對的存儲，數據量一般不超過5M。是常用的輕量數據存儲方案。不能跨域。
• sessionstorage（標準h5方案）
  也是鍵值對，特點是關閉App就消失了，也不能跨webview，一般不用於持久化數據保存。
• websql（標準h5方案）
  是手機端關係型數據庫，各種手機都支持。注意iOS8、9的wkWebview不支持websql。如果要在iOS8、9上使用websql，請使用uiwebview內核。
• indexedDB（標準h5方案）
  是HTML5裏最新的數據存儲規範，但不是基於SQL，而是基於對象。
  indexedDB性能更高，全是異步處理，學習難度偏大。最重要的是目前手機端支持度不行。Android4.4以上和iOS8以上才支持indexedDB。
• plus.navigator.setCookie
  與HTML5的標準cookie相比，plus的擴展主要是爲了跨域。所謂跨越，就是本地HTML頁面和服務器HTML頁面共享cookie數據，或者說本地頁面的js可以操作服務器頁面產生的cookie。如果沒有跨越需求，不需要使用plus擴展。注意iOS8以後的wkWebview不支持setcookie。
• plus.storage
  plus.storage也是鍵值對數據存儲。它是把OS給原生App使用的鍵值對存儲數據庫封裝一層給JS使用。
  plus.storage沒有理論上的大小限制。也是持久化的，不會被當做緩存清理。
  plus.storage相比於localstorage 還有一個特點是可跨域。當一個存儲數據，需要被本地和來自服務器的頁面同時讀寫時，就涉及跨域問題。此時HTML5的localstorage不能滿足需求，只能使用plus.storage。
  plus.storage操作要比localstorage慢幾十毫秒，尤其是在循環裏調用plus api會放大這種慢。
  有網友封裝了一個框架，針對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直接指向本地文件
• plus.sqllite
  plus.sqllite是對原生的sqllite的封裝。它也是一種可以通過sql在本地增刪改查數據庫的方案。
  有點類似websql，但相對於websql而言，sqllite的好處是：
  1. 可以預置基礎數據庫，直接打包到app裏
  2. 當手機空間不足時，websql可能會被清理，而sqllite不會。
     plus.storage沒有理論上的大小限制。

有人問三方清理工具清理垃圾會不會造成某些數據丟失，這個可能性是存在的，但概率並不高，取決於清理軟件會不會分析你的存儲數據裏哪些是可以清除的垃圾數據。除了OS的清理工具外，一般沒有root權限的清理工具是拿不到除了plus.io外的你的app的存儲數據的。
但ios上系統存儲空間很少的時候，系統會清理 cookie、localstorage、sessionstorage、websql、indexedDB 的數據，此時使用plus.storage、plus.sqllite更安全。

uni-app存儲

uni-app的存儲方案比5+app要少，因爲cookie、localstorage、sessionstorage、websql、indexedDB只有h5端支持，其他端都不支持。
uni.storage的鍵值對存儲，這個是全端支持的。
uni-app的Storage在不同端的實現不同，uni.storage在app側，映射爲plus.storage；h5側映射爲localstorage；各個小程序平臺映射爲其自帶的storage鍵值對存儲。：

• H5端爲localStorage，瀏覽器限制5M大小，是緩存概念，可能會被清理
• App端爲原生的plus.storage，無大小限制，不是緩存，持久化
• 各個小程序端爲其自帶的storage api，數據存儲生命週期跟小程序本身一致，即除用戶主動刪除或超過一定時間被自動清理，否則數據都一直可用。
• 微信小程序單個 key 允許存儲的最大數據長度爲 1MB，所有數據存儲上限爲 10MB。
• 支付寶小程序單條數據轉換成字符串後，字符串長度最大200*1024。同一個支付寶用戶，同一個小程序緩存總上限爲10MB。
• 百度、頭條小程序文檔未說明大小限制

app端，可以使用plus.io訪問文件系統，也可以使用plus.sqlite訪問數據庫。

更新：HBuilderX 1.7.2起支持plus.sqlite。

出處：http://ask.dcloud.net.cn/article/166