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

HTML5离线储存

news 2026/5/20 14:21:01

简介

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

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

户外太阳能监控供电方案：如何用CN3791芯片为3.7V锂电池设计稳定充电电路？

户外太阳能监控供电方案&#xff1a;CN3791芯片在3.7V锂电池充电电路中的实战设计 清晨六点&#xff0c;当第一缕阳光洒在郊区的通信基站上&#xff0c;搭载CN3791芯片的太阳能供电系统已经开始为锂电池注入能量——这正是现代户外监控设备赖以生存的"能量心脏"。在无…...

编程新知 2026/5/20 14:13:02

给地球做CT时，那些‘捣乱’的波都是什么来头？聊聊地震勘探里的‘噪音’家族

给地球做CT时&#xff0c;那些‘捣乱’的波都是什么来头&#xff1f;聊聊地震勘探里的‘噪音’家族 想象一下医生用CT扫描人体时&#xff0c;如果患者不停移动或周围有手机干扰&#xff0c;图像就会出现模糊和伪影。地球物理学家用地震波给地球做"CT扫描"时&#xf…...

编程新知 2026/5/20 13:54:09

如何通过内存注入技术在英雄联盟国服实现安全换肤？

如何通过内存注入技术在英雄联盟国服实现安全换肤&#xff1f; 【免费下载链接】R3nzSkin-For-China-Server Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3/R3nzSkin-For-China-Server 想象一下&#xff0c;你正在峡谷中奋战&…...

编程新知 2026/5/20 9:34:21

终极AEUX指南：如何快速实现Figma到After Effects的设计动画转换

终极AEUX指南&#xff1a;如何快速实现Figma到After Effects的设计动画转换 【免费下载链接】AEUX Editable After Effects layers from Sketch artboards 项目地址: https://gitcode.com/gh_mirrors/ae/AEUX 想要将精美的Figma设计稿快速转换为After Effects动画项目吗…...

编程新知 2026/5/20 9:32:15

告别connect！Qt Creator里用Lambda表达式写信号槽，代码能有多简洁？

Qt Creator中Lambda表达式重构信号槽&#xff1a;极致简洁的现代C实践 在Qt开发中&#xff0c;信号槽机制是GUI编程的核心支柱&#xff0c;但传统connect写法往往导致代码臃肿。当面对大量简单交互逻辑时&#xff0c;频繁声明槽函数和connect调用会让代码库迅速膨胀。Lambda表达…...

编程新知 2026/5/20 8:41:33

5步快速上手！罗技鼠标宏终极压枪教程：告别手残轻松吃鸡

5步快速上手&#xff01;罗技鼠标宏终极压枪教程&#xff1a;告别手残轻松吃鸡 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为《绝地求生…...

编程新知 2026/5/20 8:33:01

告别‘天书’！手把手教你用vdex2dex、odex2smali等工具，把Android应用的vdex/odex/cdex转成可读的dex文件

Android逆向工程实战&#xff1a;从vdex/odex/cdex到可读dex的完整指南 当你兴致勃勃地打开一个APK文件准备分析时&#xff0c;却发现里面只有vdex、odex或cdex文件&#xff0c;用JADX直接打开全是乱码——这种挫败感每个逆向工程师都经历过。本文将带你一步步破解这些"天…...

编程新知 2026/5/20 5:32:54

Keil C51评估版SRC指令限制解析与解决方案

1. 问题现象与背景解析最近在调试一个基于8051架构的嵌入式项目时&#xff0c;遇到了一个令人困惑的编译错误。当我在Keil C51开发环境中使用SRC指令时&#xff0c;编译器突然报出致命错误(Fatal Error)&#xff0c;但检查代码语法看起来完全正确。这个SRC指令是用来控制编译器…...

编程新知 2026/5/20 5:01:39

JupyterLab Desktop完整指南：5个秘诀让数据科学工作更简单

JupyterLab Desktop完整指南&#xff1a;5个秘诀让数据科学工作更简单 【免费下载链接】jupyterlab-desktop JupyterLab desktop application, based on Electron. 项目地址: https://gitcode.com/gh_mirrors/ju/jupyterlab-desktop 还在为Python环境配置和JupyterLab安…...

编程新知 2026/5/20 4:42:15

节日场景下慈善钓鱼与宠物诈骗机理及闭环防御研究

摘要 节日期间公众捐赠意愿上升、宠物领养需求旺盛&#xff0c;为网络钓鱼与社交欺诈提供了高发土壤。波士顿警方发布的节日安全预警显示&#xff0c;假冒慈善机构钓鱼、虚假宠物领养与交易诈骗已成为典型高发案件&#xff0c;两类攻击均依托情感诱导、域名仿冒、社交工程与支付…...

编程新知 2026/5/20 4:28:09