html5的离线web应用的浏览器和服务器交互的过程要是没有缓存怎么办

html-css06

html5的离线web应用的浏览器和服务器交互的过程要是没有缓存怎么办,第1张

html5的离线web应用的浏览器和服务器交互的过程要是没有缓存就需要每次交互都要实时接口调用,增加网络开销。

一、离线存储的作用

1、用户可离线访问应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要

2、用户访问本地的缓存文件,通常意味着更快的访问速度

3、仅仅加载被修改过的资源,避免同一资源对服务器多次的请求,大大降低了对服务器的访问压力

二、实现离线存储

1、在html标签里通过manifest属性引用一个cache.manifest文件,该文件里声明了浏览器需缓存的所有资源文件,如下所示:

<!DOCTYPE html>

<html lang='cn' manifest='cache.manifest'>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>离线缓存示例页面</title>

<!-- CSS文件引用 -->

</head>

<body>

<!-- 各种标签 -->

</body>

<!-- 各种脚本文件 -->

</html>

2、关于cache.manifest的定义

CACHE MANIFEST

# 注释:需要缓存的文件,无论在线与否,均从缓存里读取

chched.js

cached.css

# 注释:不缓存的文件,无论缓存中存在与否,均从新获取

NETWORK:

uncached.js

uncached.css

# 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面

FALLBACK:

index.html 404.html

本地存储-谈到存储,一般说的是数据data,不管这个应用是在线还是离线。

离线应用-这个对应的是在线,也就是,没有网的情况下,也可以使用。

后者需要把代码、程序以及资源都放到本地,如果想要使用数据,则利用本地存储。