这节继续学习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{
width: 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); 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>