使用jquery将图片缓存到indexeddb中以供离线使用

发布于 2024-12-27 10:37:01 字数 301 浏览 5 评论 0原文

我有一个包含大量图像的网页,需要在移动设备上离线查看。

我找到了 jquery 插件/教程 确实将图像存储在本地存储中,但这对我的目的不起作用。

这是可以轻松适应使用indexeddb 代替的东西吗?

另外,我的图片会定期更新。有没有办法可以在一段时间后自动清除缓存的版本,并强制用户从网络重新加载?

I have an image-heavy web page that needs to be viewable offline on mobile devices.

I found a jquery plugin/tutorial do store images in local storage, but that won't work for my purposes.

Is this something that can easily be adapted to use indexeddb instead?

Also, my images will be updated periodically. Is there a way I can automatically clear the cached versions after a certain amount of time, and force the user to re-load from the web?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

深海少女心 2025-01-03 10:37:01

索引数据库
您可以将图像存储到 IndexedDB 中,但您将负责保存它们、清除它们并根据需要更新它们。

此外,如果您需要它在移动设备上工作,IndexedDB 也不是您想要的,因为当前的移动浏览器都不支持 IndexedDB。 (来源:http://caniuse.com/#feat=indexeddb

离线应用< /强>
我建议您使用名为“应用程序缓存”的新 HTML5 功能。几乎所有浏览器都支持这一点(来源:http://caniuse.com/#feat=离线应用程序

要使用它,您只需要创建一个 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 服务器上并更新清单文件中的版本号即可。

您可以阅读有关离线规范的更多信息,或者只是用谷歌搜索示例。

IndexedDB
You can store images into an IndexedDB, but you would be responsible for saving them, clearing them and updating them as needed.

Also if you need it to work on mobile devices, an IndexedDB is not what you want, as none of the current mobile browsers support IndexedDB. (Source: http://caniuse.com/#feat=indexeddb)

Offline Applications
I would recommend instead that you use a new HTML5 feature called Application Cache. This is supported by almost all the browsers out there (Source: http://caniuse.com/#feat=offline-apps)

To use it you just need to create a Website.manifest file such as:

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

Then in your web page alter the html tag to be something like:

<html manifest="Website.manifest">

Advantages:
1. The browser will automatically cache the images
2. You access the images using the original URL (i.e. /images/SecondImage.png)
3. Updating is much easier, you just drop the new images onto the web server and update the version number in the manifest file.

You can read more about the Offline spec, or just do a google search for examples.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文