在現代Web應用中，我們經常會需要在本地存儲一些數據，一方面記住用戶的一些狀態，或個性化設置，尤其是可以緩存一些常用（甚至全部）的數據，實現更加強大和豐富的本地交互體驗。

傳統上說，我們有多種辦法來存儲離線數據，分別如下

方式	空間限制	優勢	劣勢
cookie	4kb	每個請求中會自動傳遞cookie	安全性低，空間太小
localstorage	5MB	可以存儲更多一些數據（相對于cookie）來說，且API也很簡單
sessionstorage	5MB	可以存儲更多一些數據（相對于cookie）來說，且API也很簡單	僅在session中有效

以上三種方式，還有一個共性，他們只能存儲文本數據。所有不是文本的數據（例如一個對象，或者圖片），都需要想一定辦法先轉化為文本，例如常見的是我們有一個數組或對象，一般都需要先用下面的方式序列化為文本

localStorage.setItem("test",JSON.stringify({name:"ares",age:18}))

然后，如果你要讀出來的話，又需要反序列化，例如

const?data?=?JSON.parse(localStorage.getItem("test"))

另外要命的問題就是空間太小。

所有一些牛人又發明了 IndexDB和WebSQL的方式，他們都類似于本地數據庫的方式，可以存儲更復雜的數據，以及更大量的數據（幾乎不限）。

兩者很類似，區別在于 WebSQL出現更早一些，但它不是HTML5規范的一部分。IndexDB則屬于HTML5規范的一部分，所以更加推薦使用。

你可能很高興，想趕緊學習一些IndexDB的知識吧，當然你可以通過這里學習：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

但是你別急，我今天跟你推薦的方式是用一個更加簡單的API，localforage, 它采用了類似于localstroage的簡單API語法，但是會默認使用IndexDB來進行存儲數據，在必要時也可以降級為WebSQL或localstorage。是不是很香呢？

https://localforage.github.io/localForage/

總結

以上是生活随笔為你收集整理的在Web应用中使用localforage存储离线数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。