摘要:是手機端關系型數據庫的最佳方案,各種手機都支持。但是目前手機端重量數據存儲的唯一可商用方案。是里最新的數據存儲規范,但不是基于,而是基于對象。與的標準相比,的擴展主要是為了跨域。有網友封裝了一個框架,針對數據,在超過時自動切換到,參考。
總結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 **
是手機端關系型數據庫的最佳方案,各種手機都支持。只是該標準不再更新。但是目前手機端重量數據存儲的唯一可商用方案。注意iOS8、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{或者}$ ...
如果有 新的想法 可以直接在下方評論或者 聯系我 。
---------------------------------------【原創】 ---------------------------------------
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84787.html
摘要:是手機端關系型數據庫的最佳方案,各種手機都支持。但是目前手機端重量數據存儲的唯一可商用方案。是里最新的數據存儲規范,但不是基于,而是基于對象。與的標準相比,的擴展主要是為了跨域。有網友封裝了一個框架,針對數據,在超過時自動切換到,參考。 總結HTML5+的離線本地存儲的多種方案: [ √ ] HTML5標準方案:cookie、localstorage、sessionstorage、w...
摘要:之銀彈技法下文這些淫巧在之前自認為是居家必備,裝逼撩妹的必備之物,博主一直敝帚自珍,不愿拿出來分享,現如今,極盡能事,我知道再不拿出來就在沒有價值了來由博主入行前端寫時候,因為需要兼容低版本,時常需要在繁雜冗長的操作夾雜的代碼中,盡可能巧妙 JavaScript 之銀彈の技法 下文這些淫巧在之前自認為是居家必備,裝逼撩妹的必備之物,博主一直敝帚自珍,不愿拿出來分享,現如今,ES6+極盡...
摘要:為什么會產生閉包究其根本,是因為代表的函數包含的作用域。而在作用域鏈中,外部函數的活動對象始終處于第二位,外部函數的外部函數的活動對象處于第三位直到作為作用域鏈終點的全局執行環境。 前言 此文的內容主要是來自看書的總結+小小的實踐哦~會不斷更新總結。 什么是閉包 書上是這樣定義閉包的: 有權訪問另一個函數作用域中變量的函數。 舉一個例子: function test(){ va...
摘要:博文內容屬性屬性和屬性標簽博文粗略解讀與做對比內容屬性屬性屬性屬性中的對應原生中的中的對應原生中對象在中在更早版本的中,內容屬性在對象上表示為文檔對象模型。即中屬性屬性解讀內容屬性在是源中指定的屬性,例如,。 [博文]內容屬性(HTML屬性)和 DOM 屬性 標簽: 博文 JavaScript 粗略解讀(與jQuery做對比) 內容屬性(HTML屬性) : attribute D...
閱讀 3250·2023-04-25 22:47
閱讀 3765·2021-10-11 10:59
閱讀 2300·2021-09-07 10:12
閱讀 4243·2021-08-11 11:15
閱讀 3432·2019-08-30 13:15
閱讀 1750·2019-08-30 13:00
閱讀 968·2019-08-29 14:02
閱讀 1680·2019-08-26 13:57