在Web应用中使用localforage存储离线数据
在現(xiàn)代Web應(yīng)用中,我們經(jīng)常會需要在本地存儲一些數(shù)據(jù),一方面記住用戶的一些狀態(tài),或個性化設(shè)置,尤其是可以緩存一些常用(甚至全部)的數(shù)據(jù),實現(xiàn)更加強大和豐富的本地交互體驗。
傳統(tǒng)上說,我們有多種辦法來存儲離線數(shù)據(jù),分別如下
| 方式 | 空間限制 | 優(yōu)勢 | 劣勢 |
| cookie | 4kb | 每個請求中會自動傳遞cookie | 安全性低,空間太小 |
| localstorage | 5MB | 可以存儲更多一些數(shù)據(jù)(相對于cookie)來說,且API也很簡單 | |
| sessionstorage | 5MB | 可以存儲更多一些數(shù)據(jù)(相對于cookie)來說,且API也很簡單 | 僅在session中有效 |
以上三種方式,還有一個共性,他們只能存儲文本數(shù)據(jù)。所有不是文本的數(shù)據(jù)(例如一個對象,或者圖片),都需要想一定辦法先轉(zhuǎn)化為文本,例如常見的是我們有一個數(shù)組或?qū)ο?#xff0c;一般都需要先用下面的方式序列化為文本
localStorage.setItem("test",JSON.stringify({name:"ares",age:18}))然后,如果你要讀出來的話,又需要反序列化,例如
const?data?=?JSON.parse(localStorage.getItem("test"))另外要命的問題就是空間太小。
所有一些牛人又發(fā)明了 IndexDB和WebSQL的方式,他們都類似于本地數(shù)據(jù)庫的方式,可以存儲更復(fù)雜的數(shù)據(jù),以及更大量的數(shù)據(jù)(幾乎不限)。
兩者很類似,區(qū)別在于 WebSQL出現(xiàn)更早一些,但它不是HTML5規(guī)范的一部分。IndexDB則屬于HTML5規(guī)范的一部分,所以更加推薦使用。
你可能很高興,想趕緊學(xué)習(xí)一些IndexDB的知識吧,當(dāng)然你可以通過這里學(xué)習(xí):https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API
但是你別急,我今天跟你推薦的方式是用一個更加簡單的API,localforage, 它采用了類似于localstroage的簡單API語法,但是會默認使用IndexDB來進行存儲數(shù)據(jù),在必要時也可以降級為WebSQL或localstorage。是不是很香呢?
https://localforage.github.io/localForage/
總結(jié)
以上是生活随笔為你收集整理的在Web应用中使用localforage存储离线数据的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 使用零代码平台构建应用,应该怎样转变思路
- 下一篇: NET问答: 如何检查一个 string