HTML5离线储存

简介

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

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

创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：
```
<html lang="en" manifest="index.manifest">
1
```
在 cache.manifest 文件中编写需要离线存储的资源：
```
CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
1
2
3
4
5
6
7
8
9
```
- CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
- NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
- FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。
在离线状态时，操作 window.applicationCache 进行离线缓存的操作：
- 更新 manifest 文件
- 通过 javascript 操作
- 清除浏览器缓存

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

相关阅读:
MaskRCNN（matterport）模型搭建与实验
OneFlow中的错误处理：Maybe
Win11如何格式化硬盘？
10月7日，每日信息差
编程2016 1
git diff 生成patch合入代码
java计算机毕业设计基于springboo+vue的校园二手闲置物品交易系统
【STM32HAL库】外部中断
使用Harbor作为docker镜像仓库之安装运行Harbor
【Mac】破解死循环，成功安装 Homebrew、curl、wget，快速配置 zsh

原文地址：https://blog.csdn.net/x550392236/article/details/132608462