App/uni-app離線本地存儲(chǔ)方案

5+App的離線存儲(chǔ)

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

HTML5標(biāo)準(zhǔn)方案:cookie、localstorage、sessionstorage、websql、indexedDB

HTML5Plus擴(kuò)展方案:plus.navigator.setCookie、plus.storage、plus.io、plus.sqllite

cookie(標(biāo)準(zhǔn)h5方案)

體量最小,可以設(shè)置過期時(shí)間。不能跨域。

localstorage(標(biāo)準(zhǔn)h5方案)

適合key、value鍵值對(duì)的存儲(chǔ),數(shù)據(jù)量一般不超過5M。是常用的輕量數(shù)據(jù)存儲(chǔ)方案。不能跨域。

sessionstorage(標(biāo)準(zhǔn)h5方案)

也是鍵值對(duì),特點(diǎn)是關(guān)閉App就消失了,也不能跨webview,一般不用于持久化數(shù)據(jù)保存。

websql(標(biāo)準(zhǔn)h5方案)

是手機(jī)端關(guān)系型數(shù)據(jù)庫(kù),各種手機(jī)都支持。注意iOS8、9的wkWebview不支持websql。如果要在iOS8、9上使用websql,請(qǐng)使用uiwebview內(nèi)核。

indexedDB(標(biāo)準(zhǔn)h5方案)

是HTML5里最新的數(shù)據(jù)存儲(chǔ)規(guī)范,但不是基于SQL,而是基于對(duì)象。

indexedDB性能更高,全是異步處理,學(xué)習(xí)難度偏大。最重要的是目前手機(jī)端支持度不行。Android4.4以上和iOS8以上才支持indexedDB。

plus.navigator.setCookie

與HTML5的標(biāo)準(zhǔn)cookie相比,plus的擴(kuò)展主要是為了跨域。所謂跨越,就是本地HTML頁(yè)面和服務(wù)器HTML頁(yè)面共享cookie數(shù)據(jù),或者說本地頁(yè)面的js可以操作服務(wù)器頁(yè)面產(chǎn)生的cookie。如果沒有跨越需求,不需要使用plus擴(kuò)展。注意iOS8以后的wkWebview不支持setcookie。

plus.storage

plus.storage也是鍵值對(duì)數(shù)據(jù)存儲(chǔ)。它是把OS給原生App使用的鍵值對(duì)存儲(chǔ)數(shù)據(jù)庫(kù)封裝一層給JS使用。

plus.storage沒有理論上的大小限制。也是持久化的,不會(huì)被當(dāng)做緩存清理。

plus.storage相比于localstorage 還有一個(gè)特點(diǎn)是可跨域。當(dāng)一個(gè)存儲(chǔ)數(shù)據(jù),需要被本地和來自服務(wù)器的頁(yè)面同時(shí)讀寫時(shí),就涉及跨域問題。此時(shí)HTML5的localstorage不能滿足需求,只能使用plus.storage。

plus.storage操作要比localstorage慢幾十毫秒,尤其是在循環(huán)里調(diào)用plus api會(huì)放大這種慢。

有網(wǎng)友封裝了一個(gè)框架,針對(duì)key-value數(shù)據(jù),在localstorage超過5m時(shí)自動(dòng)切換到plus.storage,參考http://ask.dcloud.net.cn/article/552。雖然這么做聽起來有點(diǎn)復(fù)雜,但我們對(duì)這種追求性能極致的開發(fā)者非常贊賞。

plus.io

plus.io是文件讀寫,雖然也可以通過讀寫txt等文件存儲(chǔ)數(shù)據(jù),但并不如專業(yè)的storage和websql方便。

plus.io更多的是用于圖片等多媒體文件的本地保存。

比如圖文列表的離線使用,一般有2種做法:

圖片下載不通過img的src,而是plus.dowload下載的,先下載圖片,存好路徑后,然后img的src動(dòng)態(tài)指定文件路徑

圖片使用img的src下載,然后用canvas把img存成圖片文件。下次不聯(lián)網(wǎng),img的scr直接指向本地文件

plus.sqllite

plus.sqllite是對(duì)原生的sqllite的封裝。它也是一種可以通過sql在本地增刪改查數(shù)據(jù)庫(kù)的方案。

有點(diǎn)類似websql,但相對(duì)于websql而言,sqllite的好處是:

可以預(yù)置基礎(chǔ)數(shù)據(jù)庫(kù),直接打包到app里

當(dāng)手機(jī)空間不足時(shí),websql可能會(huì)被清理,而sqllite不會(huì)。

plus.storage沒有理論上的大小限制。

有人問三方清理工具清理垃圾會(huì)不會(huì)造成某些數(shù)據(jù)丟失,這個(gè)可能性是存在的,但概率并不高,取決于清理軟件會(huì)不會(huì)分析你的存儲(chǔ)數(shù)據(jù)里哪些是可以清除的垃圾數(shù)據(jù)。除了OS的清理工具外,一般沒有root權(quán)限的清理工具是拿不到除了plus.io外的你的app的存儲(chǔ)數(shù)據(jù)的。

但ios上系統(tǒng)存儲(chǔ)空間很少的時(shí)候,系統(tǒng)會(huì)清理 cookie、localstorage、sessionstorage、websql、indexedDB 的數(shù)據(jù),此時(shí)使用plus.storage、plus.sqllite更安全。

uni-app存儲(chǔ)

uni-app的存儲(chǔ)方案比5+app要少,因?yàn)閏ookie、localstorage、sessionstorage、websql、indexedDB只有h5端支持,其他端都不支持。

uni.storage的鍵值對(duì)存儲(chǔ),這個(gè)是全端支持的。

uni-app的Storage在不同端的實(shí)現(xiàn)不同,uni.storage在app側(cè),映射為plus.storage;h5側(cè)映射為localstorage;各個(gè)小程序平臺(tái)映射為其自帶的storage鍵值對(duì)存儲(chǔ):

H5端為localStorage,瀏覽器限制5M大小,是緩存概念,可能會(huì)被清理

App端為原生的plus.storage,無大小限制,不是緩存,持久化

各個(gè)小程序端為其自帶的storage api,數(shù)據(jù)存儲(chǔ)生命周期跟小程序本身一致,即除用戶主動(dòng)刪除或超過一定時(shí)間被自動(dòng)清理,否則數(shù)據(jù)都一直可用。

微信小程序單個(gè) key 允許存儲(chǔ)的最大數(shù)據(jù)長(zhǎng)度為 1MB,所有數(shù)據(jù)存儲(chǔ)上限為 10MB。

支付寶小程序單條數(shù)據(jù)轉(zhuǎn)換成字符串后,字符串長(zhǎng)度最大200*1024。同一個(gè)支付寶用戶,同一個(gè)小程序緩存總上限為10MB。

百度、頭條小程序文檔未說明大小限制

app端還支持2種方案

使用plus.io訪問文件系統(tǒng)

使用plus.sqlite訪問數(shù)據(jù)庫(kù)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容