当前位置： 首页 > news >正文

HTML5离线储存

news 2026/2/10 19:32:42

简介

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

原理：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 文件发生改变时，资源请求本身也会触发更新。

相关文章：

HTML5离线储存

简介 离线存储指的是&#xff1a;在用户没有与因特网连接时&#xff0c;可以正常访问站点或应用&#xff0c;在用户与因特网连接时&#xff0c;更新用户机器上的缓存文件。 原理&#xff1a;HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)&#xf…...

编程日记 2023/9/1 7:25:39

cmd: Union[List[str], str], ^ SyntaxError: invalid syntax

跑项目在调用from easyprocess import EasyProcess 遇到报错&#xff1a; cmd: Union[List[str], str], ^ SyntaxError: invalid syntax猜测是EasyProcess版本与python版本不对应 pip show EasyProcess查证一下&#xff1a; WARNING: pip is being invoked by an old…...

编程日记 2023/9/1 7:24:37

2023高教社杯数学建模思路 - 案例：异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…...

编程日记 2023/9/1 7:23:36

FFDNet-pytorch版本代码测试教程

一、FFDNet-pytorch版本代码下载 &#xff08;1&#xff09;FFDNet-pytorch下载 https://download.csdn.net/download/qq_41104871/88233742 二、FFDNet-pytorch版本代码运行环境配置 &#xff08;1&#xff09;FFDNet-pytorch版本代码运行环境配置 https://blog.csdn.net/q…...

编程日记 2023/9/1 7:22:35

uni-app项目由hbuilder项目转化为cli项目

1.背景 原uni-app项目是通过hbuilder创建的&#xff0c;运行以及打包都要依赖于hbuilder运行&#xff1b;一般在vscode开发&#xff0c;在hbuilder运行比较怪异&#xff1b;后续希望脱离hbuilder运行并能通过构建平台进行打包&#xff0c;因此将hbuilder项目转化为cli项目 2.…...

编程日记 2023/9/1 7:21:33

使用SpaceDesk连接平板作为电脑副屏详细步骤教程

文章目录 下载安装PC端安装安卓端安装 配置步骤PC端安卓端 连接 SpaceDesk官网链接https://www.spacedesk.net/ (应该是需要科学上网才能进入) SpaceDesk它可以连接安卓,苹果的平板,手机等&#xff0c;也可以连接其他可以打开网页&#xff08;HTML5&#xff09;的设备。 这里我…...

编程日记 2023/9/1 7:20:32

云备份——第三方库使用介绍（下）

httplib库&#xff0c;一个C11单文件头的跨平台HTTP/HTTPS库。安装起来非常容易。只需包含httplib.h在你的代码中即可。 httplib库实际上是用于搭建一个简单的http服务器或者客户端的库&#xff0c;这种第三方网络库&#xff0c;可以让我们免去搭建服务器或客户端的时间&#x…...

编程日记 2023/9/1 7:19:30

springboot实战（一）之项目搭建

环境准备 ideajdk1.8springboot版本 2.7.15 项目开始 1.打开idea&#xff0c;点击new project 2.选择spring initillizr 核对&#xff1a;Server Url是否是&#xff1a;start.spring.io&#xff0c;然后根据自己依次设置项目名称、存储位置和包名&#xff0c;如下&#xff…...

编程日记 2023/9/1 7:18:28

线性代数的学习和整理16：什么是各种空间(类型)，向量空间，距离(类型)？

目录 1 空间相关的群&#xff0c;环&#xff0c;域&#xff0c;集合&#xff0c;空间的预备知识 1.1&#xff1a;群&#xff0c;环&#xff0c;域&#xff0c;集合&#xff0c;空间的定义&#xff08;表示不懂&#xff0c;只是做个标记&#xff09; 2 空间 2.1 各种空间概念…...

编程日记 2023/9/1 7:17:26

css实现文字翻转效果

csss实现文字翻转效果 主要实现核心属性 direction: rtl; unicode-bidi: bidi-override; direction: rtl; 这个属性用于指定文本的方向为从右到左&#xff08;Right-to-Left&#xff09;。它常用于处理阿拉伯语、希伯来语等从右向左书写的文字样式。当设置了 direction: rtl; …...

编程日记 2023/9/1 7:16:25

19 Linux之Python定制篇-apt软件管理和远程登录

19 Linux之Python定制篇-apt软件管理和远程登录 文章目录 19 Linux之Python定制篇-apt软件管理和远程登录19.1 apt软件管理19.1.1 apt介绍19.1.2 更新软件下载地址-阿里源19.1.3 使用apt完成安装和卸载vim 19.2 远程登录Ubuntu 学习视频来自于B站【小白入门 通俗易懂】2021韩顺…...

编程日记 2023/9/1 7:15:24

WebDAV之π-Disk派盘 + notototo

notototo是一款功能丰富的笔记软件，提供了多种功能，包括载入PDF文件并进行批注和标记的能力。您可以使用Apple Pencil或手指在PDF文件上进行写作和绘图操作。 同时，notototo也提供了与团队合作的功能，您可以连接到服务器并与他人协作。此外，您还可以在notototo中进行绘图，…...

编程日记 2023/9/1 7:14:23

_kbhit() and getch() 在小游戏中用不了。因为控制台函数，仅在控制台程序中可用

太长不看版&#xff1a; _kbhit() and getch() 包含在conio.h中。 conio是Console Input/Output&#xff08;控制台输入输出&#xff09;的简写&#xff0c;其中定义了通过控制台进行数据输入和数据输出的函数&#xff0c;主要是一些用户通过按键盘产生的对应操作&#xff0c…...

编程日记 2023/9/1 7:13:21

dayjs格式转换成日期

目录 方法一&#xff1a; ​编辑方法二&#xff1a; 这个项目在筛选订单时间的时候是由前端进行筛选的&#xff0c;用的是adt-design-pro进行二开的&#xff0c;其中在用日期组件的时候遇到了一个问题&#xff0c;组件返回的是&#xff1a; 但是我需要的是年-月-日&#xff…...

编程日记 2023/9/1 7:12:20

mfc140u.dll丢失如何修复？解析mfc140u.dll是什么文件跟修复方法分享

大家好&#xff01;今天&#xff0c;我将和大家分享一下关于计算机中mfc140u.dll丢失的6种解决方法。希望我的分享能对大家在计算机使用过程中遇到问题时提供一些帮助。 首先&#xff0c;我想请大家了解一下什么是mfc140u.dll文件。mfc140u.dll是一个动态链接库文件&#xff0…...

编程日记 2023/9/1 7:11:19

STM32--SPI通信与W25Q64（2）

STM32–SPI通信与W25Q64&#xff08;1&#xff09; 文章目录 SPI外设特征 SPI框图传输模式主模式全双工连续传输 非连续传输硬件SPI读写W25Q64 SPI外设 STM32内部集成了硬件SPI收发电路&#xff0c;可以由硬件自动执行时钟生成、数据收发等功能&#xff0c;减轻CPU的负担。 特…...

编程日记 2023/9/1 7:10:18

微信小程序 校园周边美食商城分享系统

管理员、会员、商家可通过Android系统手机打开系统&#xff0c;注册登录后可进行管理员后端&#xff1b;首页、个人中心、会员管理、商家管理、美食类型管理、美食信息管理、美食交流、我的收藏管理、系统管理、订单管理&#xff0c;会员前端&#xff1b;首页、美食信息、美食交…...

编程日记 2023/9/1 7:09:17

K8S - 架构、常用K8S命令、yaml资源清单部署、Ingress、故障排查、存储卷

K8S K8S官网文档&#xff1a;https://kubernetes.io/zh/docs/home/学习东西还是要从官方文档入手&#xff1b;用于管理、扩展、自动部署容器&#xff1b; 其实就是 对多个跨机器的Docker集群&#xff1b; K8S特性 服务发现和负载均衡 Kubernetes 可以使用 DNS 名称或自己的 …...

编程日记 2023/9/1 7:08:16

micro benchmark 使用经验

文章目录 User Guide User Guide User Guide: https://github.com/google/benchmark/blob/main/docs/user_guide.md #include <benchmark/benchmark.h> #include <chrono> #include <thread>void BM_DemoSleep(benchmark::State& state) {for (auto _ …...

编程日记 2023/9/1 7:07:14

nodejs发布静态https服务器

1、先用 npm init 创建一个package.json&#xff0c;然后添加依赖 node-static &#xff0c;package.json 如下&#xff1a; {"name": "freeswitch","version": "1.0.0","description": "test freeswitch for webrtc&…...

编程日记 2023/9/1 7:06:13

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/2/8 10:56:57

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/2/10 6:20:58