极客教程h5有哪些缓存机制
HTML5（以下简称H5）是当前主流的超文本标记语言，用于构建网页和应用程序。H5提供了多种缓存机制，可以提高应用程序的性能和用户体验。本文将详细介绍H5中几种常见的缓存机制，并给出示例代码和相应的运行结果。
1. 浏览器缓存
浏览器缓存是指浏览器将已经下载的文件或页面存储在用户本地磁盘上，以便下次访问同一资源时可以直接从本地获取，而不需要重新下载。浏览器缓存可以大大提高页面加载的速度，减轻服务器负载。
常见的浏览器缓存机制包括强缓存和协商缓存。
1.1 强缓存
强缓存是指当浏览器请求某个资源时，先检查本地缓存中是否存在该资源的副本，并且该副本的有效时间没有过期。如果存在且未过期，则直接从缓存中获取该资源，不再向服务器发送请求。
H5使用HTTP头部字段来控制强缓存，主要有两个字段：Expires和Cache-Control。Expires是一个日期时间，表示资源的过期时间；Cache-Control是一个指令，定义了资源的缓存策略。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>强缓存示例</title>
<meta http-equiv="Cache-Control" content="max-age=3600">
<!-- 设置缓存有效时间为3600秒 -->
</head>
<body>
<h1>强缓存示例页面</h1>
<p>这是一个强缓存示例页面。</p>
</body>
</html>
运行结果：当第一次加载该页面时，浏览器会将该页面缓存到本地。在接下来的3600秒内再次访问该页面时，浏览器直接从缓存中获取，不会再向服务器发送请求。
1.2 协商缓存
协商缓存是指当浏览器请求某个资源时，先向服务器发送一个验证请求，询问该资源是否有更新。如果服务器返回的验证结果是资源未更新，则浏览器可以从本地缓存中获取该资源；如果服务器返回的验证结果是资源已更新，则浏览器重新下载该资源。
H5使用HTTP头部字段来控制协商缓存，主要有两个字段：Last-Modified和ETag。Last-Modified是一个日期时间，表示资源的最后修改时间；ETag是一个标识符，表示资源的唯一标识。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>协商缓存示例</title>
<meta http-equiv="Last-Modified" content="Mon, 01 Jan 2022 00:00:00 GMT">
<!-- 设置资源的最后修改时间 -->
<meta http-equiv="ETag" content="123456789">
<!-- 设置资源的唯一标识 -->
</head>
<body>
<h1>协商缓存示例页面</h1>
<p>这是一个协商缓存示例页面。</p>
</body>
</html>
运行结果：当第一次加载该页面时，浏览器会将该页面缓存到本地，并保存页面的最后修改时间和唯一标识。在接下来的请求中，浏览器会通过If-Modified-Since和If-None-Match字段向服务器发送验证请求，如果服务器返回的状态码是304（Not Modified），则表示资源未更新，浏览器从本地缓存中获取该资源；如果服务器返回的状态码是200（OK），则表示资源已更新，浏览器重新下载该资源。
2. 应用程序缓存
应用程序缓存是H5的一个重要特性，可以让开发者将网页或应用程序的资源缓存在本地，即使离线状态下也能正常访问这些资源。应用程序缓存可以提高离线使用的体验，减少服务器负载。
应用程序缓存主要由一个名为manifest的文件控制，它是一个包含各种资源的文本文件，可以通过将该文件的URL指定给HTML文档的manifest属性来启用应用程序缓存。
示例代码如下：
<!DOCTYPE html>
<html manifest="example.appcache">
<head>
<title>应用程序缓存示例</title>
</head>
<body>
<h1>应用程序缓存示例页面</h1>
<p>这是一个应用程序缓存示例页面。</p>
</body>
</html>
example.appcache文件的内容如下：
CACHE MANIFEST
# 版本号
# ...
CACHE:
/stylesheet.css
/script.js
/logo.png
NETWORK:
*
FALLBACK:
/ fallback.html
运行结果：当第一次加载该页面时，浏览器会下载并缓存example.appcache文件指定的资源。在接下来的离线状态下访问该页面时，浏览器依然可以从缓存中获取这些资源。应用程序缓存可以通过更新manifest文件的版本号来实现缓存资源的更新。
3. Web Storage
Web Storage提供了一种在客户端保存数据的机制，可以用于保存应用程序的状态或用户个人信息等。Web Storage分为两种类型：sessionStorage和localStorage。
sessionStorage用于临时保存会话级别的数据，在浏览器关闭时会被自动清除；localStorage用于持久保存数据，不会随浏览器的关闭而清除。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Web Storage示例</title>
<script>
function saveData() {
var data = document.getElementById("data").value;
localStorage.setItem("data", data);
}
function loadData() {
var data = localStorage.getItem("data");
if (data) {
document.getElementById("result").innerText = data;
} else {
document.getElementById("result").innerText = "没有保存的数据";
}
}
function clearData() {
localStorage.removeItem("data");
document.getElementById("result").innerText = "数据已清除";
}
</script>
</head>
<body>
<h1>Web Storage示例页面</h1>
<input type="text" id="data" placeholder="请输入要保存的数据">
<button onclick="saveData()">保存数据</button>
<button onclick="loadData()">加载数据</button>
<button onclick="clearData()">清除数据</button>
<p id="result"></p>
</body>
</html>
运行结果：在文本框中输入数据，并点击保存数据按钮，数据将被保存到localStorage中。点击加载数据按钮，数据将被加载并显示在页面上。点击清除数据按钮，数据将被从localStorage中清除。
4. Service Worker
Service Worker是一种在浏览器后台运行的脚本，可以拦截和处理网络请求，实现离线缓存和推送通知等功能。Service Worker可以将资源缓存到本地，使得应用程序可以在离线状态下继续运行，并且可以处理离线请求。
使用Service Worker需要注册和安装，示例代码如下：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(function(registration) {
console.log('Service Worker 注册成功:', registration);
})
.catch(function(error) {
console.log('Service Worker 注册失败:', error);
});
}
sw.js文件的内容如下：
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cache')
.then(function(cache) {
return cache.addAll([
'/',
'/stylesheet.css',
'/script.js',
'/logo.png'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
} else {
return fetch(event.request);
}
})
);
});
运行结果：当注册和安装Service Worker成功后，浏览器会在后台开启Service Worker，并将指定的资源缓存到本地。当用户离线时，浏览器会从缓存中获取资源，并返回给页面。当用户在线时，浏览器则会向服务器发送网络请求，并根据服务器的响应来更新缓存。
5. IndexedDB
IndexedDB是一种在浏览器中保存和检索大量结构化数据的API，它提供了一个类似数据库的存储机制。IndexedDB可以用于缓存和离线存储数据，适用于需要离线访问大量数据的应用程序。
使用IndexedDB需要创建数据库，示例代码如下：
var request = indexedDB.open('my-database', 1);
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore('my-object-store', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
};
request.onsuccess = function(event) {
var db = event.target.result;
// 存储数据
var transaction = db.transaction('my-object-store', 'readwrite');
var objectStore = transaction.objectStore('my-object-store');
var data = { id: 1, name: 'John Doe', email: 'john@example.com' };
objectStore.add(data);
transaction.oncomplete = function(event) {
console.log('数据成功存储到IndexedDB');
};
};
运行结果：当成功创建数据库并存储数据后，数据将被保存到IndexedDB中。应用程序可以通过IndexedDB API来读取和更新这些数据。
总结
本文介绍了H5中几种常见的缓存机制，包括浏览器缓存（强缓存和协商缓存）、应用程序缓存、Web Storage、Service Worker和IndexedDB。这些缓存机制可以提高应用程序的性能和用户体验，减轻服务器负载，并实现离线访问和存储数据的功能。开发者可以根据实际需求选择适合的缓存机制来优化应用程序。