JavaScript の MUI-APP 數據儲存方法

總結HTML5+的離線本地存儲的多種方案:

• [ √ ] HTML5標準方案：cookie、localstorage、sessionstorage、websql、indexedDB
• [ √ ] HTML5Plus擴展方案：plus.navigator.setCookie、plus.storage、plus.io

分析:

• cookie
  體量最小，能夠設置過時時間。不能跨域. 全部設備都支持(IOS不支持 ASCII碼,不支持中文)
• localstorage
  適合key、value鍵值對的存儲，數據量通常不超過5M。是經常使用的輕量數據存儲方案。不能跨域。
• sessionstorage
  也是鍵值對，特色是關閉App就消失了，也不能跨webview，通常不用於持久化數據保存。
• websql **
  是手機端關係型數據庫的最佳方案，各類手機都支持。只是該標準再也不更新。可是目前手機端重量數據存儲的惟一可商用方案。注意iOS八、9的wkWebview不支持websql。
• indexedDB
  是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會放大這種慢。若是不是由於大小限制或跨越，儘可能使用localstorage。(有網友封裝了一個框架，針對key-value數據，在localstorage超過5m時自動切換到plus.storage，參考http://ask.dcloud.net.cn/arti...。雖然這麼作聽起來有點複雜，但咱們對這種追求性能極致的開發者很是讚揚。)

• plus.io
  plus.io是文件讀寫，雖然也能夠經過讀寫txt等文件存儲數據，但並不如專業的storage和websql方便。plus.io更多的是用於圖片等多媒體文件的本地保存。

  • 好比圖文列表的離線使用，通常有2種作法：

    • 圖片下載不經過img的src，而是plus.dowload下載的，先下載圖片，存好路徑後，而後img的src動態指定文件路徑
    • 圖片使用img的src下載，而後用canvas把img存成圖片文件。下次不聯網，img的scr直接指向本地文件

實際開發中經常使用以下方案:

websql + base64 + html5本地存儲保存圖片和文件 + plus.dowload緩存圖片

---

原文地址 : https://segmentfault.com/a/11...
若是喜歡， 應該:　點贊 $underline{或者}$ ...
若是有 新的想法 能夠直接在下方評論或者 聯繫我 。

---------------------------------------【原創】 ---------------------------------------