HTML5离线储存

简介

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

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


使用方法

  1. 创建一个和 html 同名的 manifest 文件,然后在页面头部加入 manifest 属性:

    <html lang="en" manifest="index.manifest">
    
  2. cache.manifest 文件中编写需要离线存储的资源:

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

    • 更新 manifest 文件
    • 通过 javascript 操作
    • 清除浏览器缓存

浏览器是如何对 HTML5 的离线储存资源进行管理和加载

  • 在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问页面 ,那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的 manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,就会重新下载文件中的资源并进行离线存储。

  • 离线的情况下,浏览器会直接使用离线存储的资源。


注意事项

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/62542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

生成对抗网络(GAN):在图像生成和修复中的应用

文章目录 什么是生成对抗网络&#xff08;GAN&#xff09;&#xff1f;GAN在图像生成中的应用图像生成风格迁移 GAN在图像修复中的应用图像修复 拓展应用领域总结 &#x1f389;欢迎来到AIGC人工智能专栏~生成对抗网络&#xff08;GAN&#xff09;&#xff1a;在图像生成和修复…

28. 找出字符串中第一个匹配项的下标

28. 找出字符串中第一个匹配项的下标 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 class Solutio…

C++中常量#define和const修饰符区别

目录 1、常量需要初始化值 2、1类型和安全检查不同 2、2编译器处理不同 2、3存储方式不同 2、4定义域不同 2、6是否可以做函数参数 3、 const关键字 4、#define关键字 5、const在指针上的应用 1、常量需要初始化值 //错误写法 const double pi;//会报未初始化本地变…

Visual Studio Code 终端配置使用 MySQL

Visual Studio Code 终端配置使用 MySQL 找到 MySQL 的 bin 目录 在导航栏中搜索–》服务 找到MySQL–>双击 在终端切换上面找到的bin目录下输入指令 终端为Git Bash 输入命令 ./mysql -u root -p 接着输入密码&#xff0c;成功在终端使用 MySQL 数据库。

go中的切片

demo1:切片定义的几种方式 package mainimport "fmt"/* 切片定义的几种方式数组和切片区别&#xff1a; 使用数组传参是值传递&#xff0c;而使用切片传参是引用传递 数组定义好长度之后不可修改&#xff0c;而切片可以理解为动态数组&#xff0c;长度可修改*/func …

Annual Inspection

机动车年检流程【交警12123】APP 到【检查地方】门口墙上贴着 然后上缴钥匙&#xff0c;等待&#xff0c;本次等待不到半小时搞定&#xff0c;速度很满意&#xff0c; 发现检测人员把你的里程数纠正了。 给你的行驶证&#xff0c;打印这些字样&#xff1a;检验有效期至XXXX 再给…

ChatGPT帮助高职院校学生实现个性化自适应学习与对话式学习

一、学习层面&#xff1a;ChatGPT帮助高职院校学生实现个性化自适应学习与对话式学习 1.帮助高职院校学生实现个性化自适应学习 数字技术的飞速发展引起了教育界和学术界对高职院校学生个性化自适应学习的更多关注和支持&#xff0c;其运作机制依赖于人工智能等技术&#xff0…

SLAM从入门到精通(开始篇)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 很多同学喜欢学习linux&#xff0c;但是他们只是把linux当成是一个嵌入式技术在学习&#xff0c;而不是当成工具在使用。平时&#xff0c;要么是自…

人工智能(AI)在材料科学方面的应用

人工智能&#xff08;AI&#xff09;在材料科学方面的应用日益增多&#xff0c;主要包括以下几个方面&#xff1a; 材料设计和发现&#xff1a;通过机器学习和深度学习算法&#xff0c;预测材料的性质和特性&#xff0c;在材料研究和开发中起到重要的作用。例如&#xff0c;使用…

【高效数据结构——位图bitmap】

初识位图bitmap 位图&#xff08;Bitmap&#xff09;是一种用于表示和操作位&#xff08;bit&#xff09;的数据结构。它是由一系列二进制位&#xff08;0 或 1&#xff09;组成的序列&#xff0c;每个位都可以单独访问和操作。 位图常用于以下情况&#xff1a; 压缩存储&…

Samba服务器

目录 一、什么是Samba&#xff1f; 二、Samba进程 三、Samba主要功能 四、Samba工作流程 五、Samba安全级别 六、Sam主配置文件/etc/samba/smb.conf 七、Samba服务配置案例 一、什么是Samba&#xff1f; Samba可以让linux计算机和windows计算机之间实现文件和打印机资源共享的一…

解决D盘的类型不是基本,而是动态的问题

一、正确的图片 1.1图片 1.2本人遇到的问题 二、将动态磁盘 转为基本盘 2.1 基本概念&#xff0c;动态无法转化为基本&#xff0c;不是双向的&#xff0c;借助软件 网址&#xff1a;转换动态磁盘到普通磁盘_检测到计算机本地磁盘为动态分区_卫水金波的博客-CSDN博客 2.2分区…

软考:中级软件设计师:数据库恢复与备份,故障与恢复,反规范化

软考&#xff1a;中级软件设计师:数据库恢复与备份 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备…

Linux 下 Java Socket 编程报 java.net.Exception:Permission denied (权限不足)

本人用Linux部署springboot项目时遇见这个错误&#xff0c;原因很简单&#xff0c;就是端口号没有选对。 在linux系统中&#xff0c;端口号再1024以下的需要root权限&#xff0c;只要把端口改成大于1024的就可以了&#xff0c;但避开一些软件的默认端口&#xff0c;如Tomcat的8…

MySQL调优实践

【慢Sql、索引失效、不会优化&#xff1f;这套MySQL优化课程帮你解决&#xff01;3小时快速掌握MySQL高级优化—索引调优和SQL调优】https://www.bilibili.com/video/BV1ko4y1N7x6?p8&vd_source795525f5b1a79fead4c11aac2ad4fbe0 慢Sql、索引失效、不会优化&#xff1f;这…

Midjourney学习(三)6个高级应用

使用Remix Mode在原图片的基础上进行二次创作 通过prompt得到大图之后&#xff0c;点击Make Variations按钮&#xff0c;输入Remix Prompt&#xff0c;即可得到意想不到的效果&#xff01; 局部内容重绘 通过局部重绘可以实现对画面内容更加精细化的控制&#xff0c;同样也是需…

在Linux上安装SonarQube

安装SonarQube在Linux上需要按照以下步骤进行操作&#xff1a; 下载并解压SonarQube安装包。可以从SonarQube官方网站下载最新的稳定版&#xff0c;然后使用命令解压缩安装包。例如&#xff0c;使用命令unzip sonarqube-9.7.zip解压缩。 创建一个新的用户并设置权限。SonarQu…

设计模式—策略模式

目录 一、定义 二、特点 三、优点 四、缺点 五、实例 六.涉及到的知识点 1、一个类里面有哪些东西&#xff1f; 2、类和实例 什么是类&#xff1f; 什么是实例&#xff1f; 什么是实例化&#xff1f; 3、字段和属性 什么是字段&#xff1f; 属性是什么&#xff1…

Mysql 语句

数据库管理 SQL语言分类 DDL 数据定义语言&#xff0c;用于创建数据库对象&#xff0c;如库、表、索引等 create 创建 create database/table; 数据库/表 create table 表名 &#xff08;括号内添加类型和字段&#xff09;;drop 删除 drop database/table; 数据库/表…

Java小记-腾讯2020校招-后台-逛街

题目描述&#xff1a; 小Q在周末的时候和他的小伙伴来到大城市逛街&#xff0c;一条步行街上有很多高楼&#xff0c;共有n座高楼排成一行。 小Q从第一栋一直走到了最后一栋&#xff0c;小Q从来都没有见到这么多的楼&#xff0c;所以他想知道他在每栋楼的位置处能看到多少栋楼呢…