HTML5的离线储存怎么使用，它的工作原理是什么？

weixin_45754783

已于 2022-09-13 21:29:47 修改

阅读量199

点赞数

文章标签： javascript 前端 html5 css3

于 2022-09-12 22:54:34 首次发布

本文链接：https://blog.csdn.net/weixin_45754783/article/details/126824317

版权

离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
使用方法：
(1)创建一个和html同名的manifest文件，然后在页面头部加入manifest属性：

<html lang="en"manifest="index.manifest">

(2)在cache.manifest文件中编写需要离线存储的资源：

CACHE MANIFEST
	#v0.11
	CACHE:
	js/app.js
	css/style.css
	NETWORK
	resourse/logo.png
	FALLBACK:
	//offline.html

·CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
·NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
·FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html
(3)在离线状态时，操作window…applicationCache进行离线缓存的操作。

如何更新缓存：

(1)更新manifest文件
(2)通过javascript操作
(3)清除浏览器缓存

注意事项：

(1)浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5MB)。
(2)如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
(3)引用manifest的html必须与manifest文件同源，在同个域下。
(4)FALLBACK中的资源必须和manifest文件同源。
(5)当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
(6)站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
(7)当manifest文件发生改变时，资源请求本身也会触发更新。