HTML5中的Web Storage和Web Worker分别有以下作用：
- Web Storage：用于在客户端浏览器上存储数据，包括LocalStorage和SessionStorage两种类型。LocalStorage用于存储长期保存的数据，而SessionStorage用于存储会话期间需要保存的数据。使用Web Storage可以减少与服务器的数据交互，提高Web应用的性能。
LocalStorage的使用示例：
// 存储数据
localStorage.setItem("name", "John");
// 获取数据
var name = localStorage.getItem("name");
// 删除数据
localStorage.removeItem("name");
SessionStorage的使用示例：
// 存储数据
sessionStorage.setItem("age", "28");
// 获取数据
var age = sessionStorage.getItem("age");
// 删除数据
sessionStorage.removeItem("age");
- Web Worker：用于在后台线程中处理耗时的任务，避免阻塞主线程，提高Web应用的响应速度和性能。Web Worker与主线程之间通过消息传递进行通信，可以传递任意类型的数据。
Web Worker的使用示例：
// 创建Worker
var worker = new Worker("worker.js");
// 发送消息
worker.postMessage("Hello World");
// 监听消息
worker.onmessage = function(event) {
console.log("Received message:", event.data);
};
// 关闭Worker
worker.terminate();
worker.js文件内容：
// 监听消息
self.addEventListener("message", function(event) {
// 处理耗时任务
var result = doSomething(event.data);
// 发送消息
self.postMessage(result);
});
function doSomething(data) {
// 处理耗时任务
return data.toUpperCase();
}
通过使用Web Storage和Web Worker，可以有效提高Web应用的性能，提高用户体验。
