这节继续学习HTML5中新增web存储、应用缓存、web Workers、服务器推送事件。
第一部分--web存储API
1.sessionStorage：存储数据到本地，存储的容量在5m左右。
<body>
<input type="text" id="userName">
<br>
<input type="button" value="显示数据" id="showData">
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<input type="button" value="清空数据" id="clearData">
<script>
document.querySelector("#setData").onclick=function(){
// /!*获取用户名*!/
var name=document.querySelector("#userName").value;
// /!*存储数据*!/
window.sessionStorage.setItem("userName",name);
}
// /!*获取数据*!/
document.querySelector("#getData").onclick=function(){
// /!*如果找不到对应名称的key,那么就会获取null*!/
var name=window.sessionStorage.getItem("userName");
alert(name);
}
// /!*删除数据*!/
document.querySelector("#removeData").onclick=function(){
// /!*在删除的时候如果key值错误，不会报错，但是也不会删除数据*!/
window.sessionStorage.removeItem("userName1");
}
</script>
</body>
2.localStorage：存储数据到本地，存储的容量在20m左右。
方法：和sessionStrage方法用法相同。
<body>
<input type="text" id="userName">
<br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script>
document.querySelector("#setData").onclick = function () {
var name = document.querySelector("#userName").value;
/*使用localStorage存储数据*/
window.localStorage.setItem("userName", name);
}
/*获取数据*/
document.querySelector("#getData").onclick = function () {
var name = window.localStorage.getItem("userName");
alert(name);
}
/*清除数据*/
document.querySelector("#removeData").onclick = function () {
window.localStorage.removeItem("userName");
}
</script>
</body>
第二部分：应用缓存(mainfest)
1.使用html5，通过创建cache manifest文件，可以轻松的创建web应用的离线版本。
2.优势：
i：可配置需要缓存的资源。
ii：网络无连接应用仍可用。
iii：本地读取缓存资源，不需要向服务器请求资源，缓解服务器负担，提升访问速度。
3.使用
i：文档<html>标签中需要包含manifest属性。
举例：
首先创建HTML文件。
<!--manifest="应用程序缓存清单文件的路径 建议文件的扩展名是appcache,这个文件的本质就是一个文本文件"-->
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
300px;
display: block;
}
</style>
</head>
<body>
<img src="../images/l1.jpg" alt="">
<img src="../images/l2.jpg" alt="">
<img src="../images/l3.jpg" alt="">
<img src="../images/l4.jpg" alt="">
</body>
</html>
创建manifest文件。
#表示注释。 CACHE MANIFEST #上面一句代码必须是当前文档的第一句 #需要缓存的文件清单列表 CACHE: #下面就是需要缓存的清单列表 ../images/l1.jpg ../images/l2.jpg # *:代表所有文件 #配置每一次都需要重新从服务器获取的文件清单列表 NETWORK: ../images/l3.jpg #配置如果文件无法获取则使用指定的文件进行替代 FALLBACK: ../images/l4.jpg ../images/banner_1.jpg # /:代表所有文件
第三部分--web存储API
1.什么是Web Worker？
web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。
前端程序中JavaScript执行是阻塞式的，如果主线程处理特别复杂的操作，那么界面就会假死，给用户直观的感受就是页面很卡体验很差，此时我们就可以使用webWoker处理这个复杂的操作，同时把处理的结果返回给主UI更新主UI，这样就不会阻塞主线程的执行。
2.web Worker实践
方法：postMessage()-用于向HTML页面传回一段消息。
terminate()-终止web Worker，并释放浏览器/计算机资源。
举例：
第一步：首先创建count.js文件
var countNum=0; function count() { postMessage(countNum);
countNum++; setTimeout(count,500); } count();
第二步：创建index.html文件
<!DOCTYPE html>
<html>
<body>
<p>Count numbers:
<output id="result"></output>
</p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
if (typeof (Worker) !== "undefined") {
if (typeof (w) == "undefined") {
w = new Worker("count.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}
function stopWorker() {
w.terminate();
}
</script>
</body>
</html>
第四部分--服务器推送事件
1.什么是服务器推送事件？
服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分，可以用来从服务端实时推送数据到浏览器端。传统的服务器端推送数据技术我们可以使用WebSocket实现。
2.HTML5服务器推送事件API
2.1服务器代码头：
header('Content-Type:text/event-stream')；
2.2EventSource事件
onopen 服务器的链接被打开
onmessage 接收消息
onerror 错误发生
3.服务器推送事件实现：
第一步创建index.php文件
<?php header('Content-Type:text/event=stream'); // 服务器端循环打印日期信息 for($i = 0; $i < 100; $i++){ date_default_timezone_set("Asia/Shanghai"); echo 'data:'.date('Y-m-d H-i-s'); echo " "; flush(); sleep(1); }
第二部创建index.html文件 -- 接收服务端发送的消息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Status:</h1> <div id="statusDiv"></div> <h1>Server Data:</h1> <div id="serverData"></div> </body> <script> var serverData,statusDiv; var SERVER_URL = 'index.php' serverData = document.getElementById("serverData"); statusDiv = document.getElementById("statusDiv"); function startListenServer(){ statusDiv.innerHTML = "start Connect Server..."; var es = new EventSource(SERVER_URL); es.onopen = openHandler; es.onerror = errorHandler; es.onmessage = messageHandler; } //开始调用监听服务器消息方法 startListenServer() function openHandler(e){ statusDiv.innerHTML = "Server open"; } function errorHandler(e){ statusDiv.innerHTML = "Error"; } function messageHandler(e){ statusDiv.innerHTML = e.data; } </script> </html>