1. 程式人生 > >HTML5+的離線本地儲存方案

HTML5+的離線本地儲存方案

HTML5+的離線本地儲存有如下多種方案:

HTML5標準方案:cookie、localstorage、sessionstorage、websql、indexedDB

HTML5Plus擴充套件方案:plus.storage、plus.io

cookie:體量最小,可以設定過期時間。

localstorage:適合key、value鍵值對的儲存,資料量一般不超過5M。是常用的輕量資料儲存方案。

sessionstorage:也是鍵值對,特點是關閉App就消失了,一般不用於持久化資料儲存,而是用於全域性變數。

websql:手機端關係型資料庫,各種手機都支援。只是該標準不再更新。

indexedDB:資料儲存規範,但不是基於SQL,而是基於物件。

plus.storage:
plus.storage也是鍵值對資料儲存。它是把OS給原生App使用的鍵值對儲存資料庫封裝一層給JS使用。
plus.storage沒有理論上的大小限制。

plus.storage相比於localstorage 的特點是可跨域。當一個儲存資料,需要被本地和來自伺服器的頁面同時讀寫時,就涉及跨域問題。此時HTML5的localstorage不能滿足需求,只能使用plus.storage。

plus.io:
plus.io是檔案讀寫,雖然也可以通過讀寫txt等檔案儲存資料,但並不如專業的storage和websql方便。
plus.io更多的是用於圖片等多媒體檔案的本地儲存。
比如圖文列表的離線使用,一般有2種做法:
圖片下載不通過img的src,而是plus.dowload下載的,先下載圖片,存好路徑後,然後img的src動態指定檔案路徑
圖片使用img的src下載,然後用canvas把img存成圖片檔案。下次不聯網,img的scr直接指向本地檔案