HTML5 的离线储存怎么使用,工作原理能不能解释一下?

简介: HTML5 的离线储存怎么使用,工作原理能不能解释一下?

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

原理:HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

使用方法

只要在头部加一个 manifest 属性就 ok 了

<!DOCTYPE html>
<html manifest="cache.manifest">
...
 
</html>

然后 cache.manifest 文件的书写方式如下:

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

解析:

代码说明:

离线存储的 manifest 一般由三个部分组成:

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


目录
相关文章
|
5月前
|
存储 缓存 移动开发
HTML5 的离线储存怎么使用,工作原理
HTML5 的离线储存怎么使用,工作原理
86 0
|
4月前
|
JavaScript 前端开发 UED
HTML标签的工作原理是什么?
【6月更文挑战第28天】HTML标签的工作原理是什么?
32 1
|
5月前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
231 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
5月前
|
存储 缓存 移动开发
html实现离线缓存(工作原理+怎么使用+应用场景)
html实现离线缓存(工作原理+怎么使用+应用场景)
77 0
|
5月前
|
移动开发 前端开发 应用服务中间件
前端——html拖拽原理
前端——html拖拽原理
46 0
|
5月前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
190 0
|
Web App开发 缓存 JavaScript
|
19天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
36 1
|
19天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
23 0
|
15天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。