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

HTML5离线储存

news 2026/4/1 10:59:48

简介

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

原理：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

英雄联盟智能助手：如何在选人阶段获得不公平优势？终极指南揭秘本地化工具LeagueAkari

英雄联盟智能助手&#xff1a;如何在选人阶段获得不公平优势&#xff1f;终极指南揭秘本地化工具LeagueAkari 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League…...

编程新知 2026/4/1 10:08:34

WSL2下USB串口设备‘失踪’？手把手教你找回/dev/ttyUSB0（以Quectel模块为例）

WSL2下USB串口设备消失的终极解决方案&#xff1a;从原理到实战 最近在WSL2环境下调试Quectel模块时&#xff0c;发现一个奇怪现象&#xff1a;lsusb明明能识别设备&#xff0c;但/dev/ttyUSB0却神秘失踪。这让我想起去年调试树莓派时遇到的类似问题&#xff0c;但WSL2的环境特…...

编程新知 2026/4/1 7:51:49

Omni-Vision Sanctuary在嵌入式边缘设备上的轻量化部署思考

Omni-Vision Sanctuary在嵌入式边缘设备上的轻量化部署思考 1. 嵌入式视觉的挑战与机遇 在智能摄像头、工业质检设备、无人机等嵌入式场景中&#xff0c;视觉模型的部署一直面临特殊挑战。传统方案要么性能不足&#xff0c;要么功耗过高&#xff0c;难以平衡实时性与能效比。…...

编程新知 2026/4/1 7:27:12

5G NR实战：LDPC与Polar编码在真实场景中的选择与优化技巧

5G NR实战&#xff1a;LDPC与Polar编码在真实场景中的选择与优化技巧 当你在基站调试现场遇到突发的大流量视频传输需求&#xff0c;或是需要为工业自动化设备配置毫秒级响应的控制信道时&#xff0c;编码方案的选择往往决定着整个通信系统的成败。LDPC和Polar这对5G NR的"…...

编程新知 2026/4/1 7:21:01

Pixel Aurora Engine效果展示：青蓝+明黄配色系像素画作视觉冲击力解析

Pixel Aurora Engine效果展示&#xff1a;青蓝明黄配色系像素画作视觉冲击力解析 1. 视觉震撼力解析 Pixel Aurora Engine通过精心设计的青蓝明黄配色方案&#xff0c;创造出极具视觉冲击力的像素艺术作品。这种色彩组合源自经典16位游戏的美学理念&#xff0c;但通过现代AI技…...

编程新知 2026/4/1 7:06:42

基于物理信息神经网络的Burgers-Fisher方程求解方法研究（Python代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/4/1 6:17:27

深入解析Jinja2模板引擎：render与generate函数的实战应用

1. Jinja2模板引擎基础入门 第一次接触Jinja2时&#xff0c;我完全被它的简洁和强大震撼到了。这个由Armin Ronacher开发的模板引擎&#xff0c;最初是为了解决Django模板的局限性而诞生的。经过多年发展&#xff0c;它已经成为Python生态中最受欢迎的模板引擎之一。 安装Jinja…...

编程新知 2026/4/1 6:07:22

Stable Diffusion 2.0超分实战：4倍放大图片还能保持清晰度的秘密

Stable Diffusion 2.0超分实战&#xff1a;4倍放大图片还能保持清晰度的秘密 在数字图像处理领域&#xff0c;超分辨率技术一直是设计师和开发者关注的焦点。传统放大方法往往导致图像模糊、细节丢失&#xff0c;而基于深度学习的超分方案正在改变这一局面。Stable Diffusion 2…...

编程新知 2026/4/1 5:57:11

pdfsizeopt如何实现PDF文件无损压缩？3大行业案例与高级技巧全解析

pdfsizeopt如何实现PDF文件无损压缩&#xff1f;3大行业案例与高级技巧全解析 【免费下载链接】pdfsizeopt PDF file size optimizer 项目地址: https://gitcode.com/gh_mirrors/pd/pdfsizeopt 在数字化办公环境中&#xff0c;PDF文件已成为信息传递的标准格式&#xff…...

编程新知 2026/4/1 4:36:09

企微API集成指南——从回调到主动发送，全流程代码解析

企业微信提供了丰富的API&#xff0c;用于接收用户添加事件、发送消息、管理标签等。今天从实战角度&#xff0c;给出API集成的最佳实践&#xff0c;附带伪代码。一、核心API清单API用途频率限制获取access_token调用其他API的前提2000次/分钟添加外部联系人通过好友每个号300人…...

编程新知 2026/4/1 4:17:50