使用jquery緩存indexeddb中的圖像以供離線使用

我有一個圖像沉重的網頁，需要在移動設備上離線查看。使用jquery緩存indexeddb中的圖像以供離線使用

我發現jquery plugin/tutorial在本地存儲中存儲圖像，但這不適合我的目的。

這是可以很容易地適應使用indexeddb而不是？

此外，我的圖像將定期更新。有沒有一種方法可以在一段時間後自動清除緩存版本，並強制用戶從網上重新加載？

2012-01-16 artmem

您也可以查看html5中的緩存清單功能作爲替代 – sottenad 2012-01-16 18:09:21

我爲html和網站UI圖像使用緩存清單，但主要內容中的圖像將超出緩存清單所允許的限制，所以我試圖改用Indexeddb。 – artmem 2012-01-16 22:13:46

IndexedDB 您可以將圖像存儲到IndexedDB中，但您將負責保存它們，清除它們並根據需要更新它們。

另外，如果你需要它在移動設備上工作，IndexedDB不是你想要的，因爲目前的移動瀏覽器都不支持IndexedDB。（來源：http://caniuse.com/#feat=indexeddb）

離線應用 我會建議您改爲使用稱爲應用程序緩存一個新的HTML5功能。這是幾乎所有的瀏覽器都能支持（來源：http://caniuse.com/#feat=offline-apps）

要使用它，你只需要創建一個Website.manifest文件如：

CACHE MANIFEST 
# v0.0.3 2011-12-21 
images/ImageThatIWantToCache.png 
images/SecondImage.png

然後在您的網頁改變HTML標籤是這樣的：

<html manifest="Website.manifest">

優點：1. 瀏覽器會自動緩存 2.您訪問使用原始URL（即/images/SecondImage.png）圖像的圖像 3.更新更容易，只需將新映像放到Web服務器上並更新清單文件中的版本號即可。

你可以閱讀更多關於Offline spec，或只是谷歌搜索的例子。

2012-01-27 19:04:26 Shawn

我不只是使用應用程序緩存的原因是大小限制。將會有很多圖像，這將超過5mb的限制。我被告知android支持Indexeddb。是否有另一種選擇，沒有Application Cache的大小限制？ – artmem 2012-01-27 22:56:58

我不這麼認爲，好像所有的瀏覽器都被鎖定在5MB。我想你會遇到與IndexedDB類似的問題。我相信這些瀏覽器的大小鎖定。 – Shawn 2012-01-27 23:26:36

回答