当前位置: 首页 > 面试题库 >

简述下html5的离线储存原理,同时说明如何使用?

轩辕越泽
2023-03-14
本文向大家介绍简述下html5的离线储存原理,同时说明如何使用?相关面试题,主要包含被问及简述下html5的离线储存原理,同时说明如何使用?时的应答技巧和注意事项,需要的朋友参考一下

原理:

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

如何使用:

① 页面头部像下面一样加入一个manifest的属性。

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

在cache.manifest文件的编写离线存储的资源。

CACHE MANIFEST
    	#v0.1
    	CACHE:
   	 		js/index.js
    		css/index.css
    	NETWORK:
    		images/logo.png
    	FALLBACK:
    		*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

以#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更新manifest以实现浏览器重新下载新的文件,可以是版本号,时间戳或md5码等。

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

① CACHE:必选,表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。

② NETWORK:可选,可以使用通配符,表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。

③ FALLBACK:可选,表示如果访问第一个资源失败,那么就使用第二个资源来替换他,如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件,/ /404.html表示用 “404.html” 替代当前目录中的所有文件,*.html /404.html表示用 “404.html” 替代 所有html文件。 

原文链接:https://blog.csdn.net/zhouziyu2011/article/details/58588546

 类似资料:
  • 本文向大家介绍HTML5的文件离线储存怎么使用,工作原理是什么?相关面试题,主要包含被问及HTML5的文件离线储存怎么使用,工作原理是什么?时的应答技巧和注意事项,需要的朋友参考一下 安利个链接 ,讲的很细 。https://segmentfault.com/a/1190000000732617

  • 本文向大家介绍请你说明一下ConcurrentHashMap的原理?相关面试题,主要包含被问及请你说明一下ConcurrentHashMap的原理?时的应答技巧和注意事项,需要的朋友参考一下 考察点:JAVA内存模型 ConcurrentHashMap 类中包含两个静态内部类 HashEntry 和 Segment。HashEntry 用来封装映射表的键 / 值对;Segment 用来充当锁的角色

  • 以下步骤: > 我在Chrome上打开了一个站点:http://www.spritecow.com/ 并检查了AppCache:Chrome://appcache-internals/ ,该站点被缓存。 我关闭了Chrome并重新加载了它。缓存还在那里。正是我离线浏览所需要的 > 本地存储存储在客户端计算机上。AppCache存储有什么不同,如果我仍然可以访问它,即使浏览器关闭了。 由于清除缓存将

  • 本文转载自 developers.google.com 作者:Addy Osmani、Marc Cohen 原文链接:网页存储概览 在路上时互联网连接会变得不稳定或无法上网,这是离线支持和可靠的性能成为 Progressive Web App 中的常用功能的原因。即使在完美的无线环境中,明智地使用缓存和其他存储技术也可显著改善用户体验。在此博文中,我们将围绕 PWA  的离线数据存储总结一些想法—

  • 本文向大家介绍请简短说明一下你对AQS的理解。相关面试题,主要包含被问及请简短说明一下你对AQS的理解。时的应答技巧和注意事项,需要的朋友参考一下 考察点:多线程 AQS其实就是一个可以给我们实现锁的框架 内部实现的关键是:先进先出的队列、state状态 定义了内部类ConditionObject 拥有两种线程模式独占模式和共享模式。 在LOCK包中的相关锁(常用的有ReentrantLock、

  • 本文向大家介绍请说明一下Java中的异常处理机制的原理以及如何应用。相关面试题,主要包含被问及请说明一下Java中的异常处理机制的原理以及如何应用。时的应答技巧和注意事项,需要的朋友参考一下 考察点:异常 当JAVA 程序违反了JAVA的语义规则时,JAVA虚拟机就会将发生的错误表示为一个异常。违反语义规则包括2种情况。一种是JAVA类库内置的语义检查。例如数组下标越界,会引发IndexOutOf