在現(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。