HTML5 提供了多种功能来支持 Web 应用的开发，使得开发者可以创建更复杂、更高效的 Web 应用。以下是你提到的 HTML5 应用相关功能的详细说明：
1. 本地数据存储
localStorage 和 sessionStorage
localStorage：用于存储永久数据，即使浏览器关闭后数据也会保留。适合存储用户设置、偏好等信息。// 存储数据 localStorage.setItem('key', 'value'); // 读取数据 var value = localStorage.getItem('key'); // 删除数据 localStorage.removeItem('key'); // 清空所有数据 localStorage.clear();sessionStorage：用于存储会话数据，浏览器窗口或标签页关闭后数据会被清除。适合存储临时数据，如表单输入内容。// 存储数据 sessionStorage.setItem('key', 'value'); // 读取数据 var value = sessionStorage.getItem('key'); // 删除数据 sessionStorage.removeItem('key'); // 清空所有数据 sessionStorage.clear();
2. 访问本地文件
HTML5 提供了 File API，允许 Web 应用访问用户的本地文件系统。主要用于文件选择和读取操作。
示例代码：
<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result); // 输出文件内容
};
reader.readAsText(file); // 读取文件内容为文本
});
</script>
3. 本地 SQL 数据（Web SQL）
HTML5 提供了 Web SQL 数据库 API 允许客户端存储数据。虽然 Web SQL 数据库被推荐使用 IndexedDB 代替，但它仍然在一些旧版浏览器中被支持。
示例代码：
// 打开或创建数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
// 创建表格
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS user (id unique, name)');
});
// 插入数据
db.transaction(function(tx) {
tx.executeSql('INSERT INTO user (id, name) VALUES (1, "John Doe")');
});
// 查询数据
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM user', [], function(tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
console.log(results.rows.item(i));
}
});
});
4. 缓存引用（Application Cache）
Application Cache 允许 Web 应用缓存资源以便离线使用。虽然在 HTML5 中，Application Cache 被 Service Workers 替代，但它仍在一些旧版浏览器中被支持。
示例代码：
<!DOCTYPE html>
<html manifest="example.appcache">
<head>
<title>Application Cache Example</title>
</head>
<body>
<h1>Welcome to the Offline App</h1>
</body>
</html>
example.appcache 文件内容示例：
makefile复制代码CACHE MANIFEST
# v1.0
index.html
styles.css
script.js
NETWORK:
*
5. JavaScript 工作者（Web Workers）
Web Workers 允许在后台线程中运行 JavaScript，使得主线程不会被阻塞。这对于执行计算密集型任务或处理大量数据非常有用。
示例代码：
主线程：
<script>
if (window.Worker) {
var worker = new Worker('worker.js');
worker.onmessage = function(e) {
console.log('Message from worker: ' + e.data);
};
worker.postMessage('Hello, worker!');
}
</script>
worker.js：
self.onmessage = function(e) {
console.log('Message received from main script: ' + e.data);
self.postMessage('Hello, main script!');
};
6. XMLHttpRequest 2
XMLHttpRequest 2 是对 XMLHttpRequest 的改进，提供了更强大的功能，如跨域请求、上传进度监控和响应类型支持等。
示例代码：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
// 设置响应类型
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response); // 输出响应数据
} else {
console.error('Request failed with status: ' + xhr.status);
}
};
xhr.onerror = function() {
console.error('Request failed');
};
xhr.send();
这些功能使得 HTML5 不仅支持富媒体内容，还提供了强大的客户端存储和处理能力，从而改善了用户体验和 Web 应用的性能。