文档章节

HTML5新增API学习笔记(二)本地程序缓存

风中一匹哈士奇
 风中一匹哈士奇
发布于 2017/09/07 10:57
字数 506
阅读 21
收藏 1
点赞 0
评论 0

本地程序缓存

这个我觉得还是比较常用的,在一些页面上,有时因为网络问题啥的,会导致图片加载不出来,空出来一块儿很难看,甚至会页面乱飞,这时候,这个玩意就派上用处了。

这里直接上代码,我用了几张图片做示例,模拟页面中的图片

<h2>应用程序缓存</h2>

<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">

接着重点来了,我们要在开头的html标签中加入mainfest这个属性,

<html lang="en" manifest="demo.appcache">

它里面放的是应用程序缓存清单文件的路径,并且后缀名建议是 .appcache,那怎么创建呢,很简单,直接新建文件就行了,说白了就是个文本文件

那么里面应该写什么呢?

首先第一句,也是必须要写的,就是

CACHE MANIFEST

这是要告诉浏览器,我是谁,你该怎么对待我0.0

下面

CACHE:

这个表示需要缓存的文件的清单列表

NETWORK:

这个表示每次都要从服务器进行重新加载的文件列表

FALLBACK:

这个,嗯,我认为是重点的,也就是解决最开始说的那个问题的东西,配置如果文件无法获取则使用指定的文件进行替代

贴出完整代码:

CACHE MANIFEST

#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
images/1.jpg
images/2.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
images/3.jpg

#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
images/4.jpg images/pic1.png
# /:代表所有文件都可以用后面的替换

运行效果

这个还是比较实用的,移动端也表示无压力。

© 著作权归作者所有

共有 人打赏支持
风中一匹哈士奇
粉丝 4
博文 8
码字总数 7492
作品 0
昌平
程序员
Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗 ⋅ 2017/03/04 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

HTML5存储学习笔记(一)

1.HTML5之前的存储方式 HTML5之前常用的存储方式为cookies。 cookies在浏览器中的存储形态,以百度首页的cookie为例: 【特别说明】 HttpOnly表示该cookie只能被server端修改,client 端不能...

球球 ⋅ 2016/11/13 ⋅ 0

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可...

刘梓航 ⋅ 2014/10/27 ⋅ 2

Html5 学习系列(六)Html5本地存储和本地数据库

//Demo:获取或者创建一个数据库,如果数据库不存在那么创建之var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });...

aicoder ⋅ 2014/08/30 ⋅ 0

Android 4.4 WebView实现WebSocket即时通讯

参考博客 Android HTML5多线程&本地缓存&文件上传 Websocket协议的学习、调研和实现 Android版本要求及H5 api支持情况 在Android版本4.4之前,由于维护和开发Android版本时使用的是AppleWebk...

IamOkay ⋅ 2016/03/21 ⋅ 4

本地存储之localStorage 、sessionStorage、globalStorage

HTML5 提供了四种在客户端存储数据的新方法,即 localStorage 、sessionStorage、globalStorage、Web Sql Database。 本文介绍前面三个,这三个相对比较简单,理解和操作都比较容易 一,loc...

浩爷 ⋅ 2015/09/15 ⋅ 0

HTML5 本地存储Web Storage

Web Storage 功能,顾名思义,就是在web上针对客户端本地存储数据的功能,具体来说Web Storage 分为两种: sessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站中...

nao ⋅ 2015/12/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud 微服务 (六) 服务通信 RestTemplate

壹 通信的方式主要有两种,Http 和 RPC SpringCloud使用的是Http方式通信, Dubbo的通信方式是RPC 记录学习SpringCloud的restful方式: RestTemplate (本篇)、Feign 贰 RestTemplate 类似 Http...

___大侠 ⋅ 10分钟前 ⋅ 0

React创建组件的三种方式

1.无状态函数式组建 无状态函数式组件,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。 无状态函数式组...

kimyeongnam ⋅ 17分钟前 ⋅ 0

react 判断实例类型

今天在写组件的时候想通过判断内部子元素不同而在父元素上应用不同的class,于是首先要解决的就是如何判断子元素的类型。 这里附上一个讲的很全面的文章: https://www.cnblogs.com/onepixel...

球球 ⋅ 23分钟前 ⋅ 0

Centos7备份数据到百度网盘

一、关于 有时候我们需要进行数据备份,如果能自动将数据备份到百度网盘,那将会非常方便。百度网盘有较大的存储空间,而且不怕数据丢失,安全可靠。下面简单的总结一下如何使用 bypy 实现百...

zctzl ⋅ 37分钟前 ⋅ 0

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 40分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 48分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 今天 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 今天 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 今天 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部