HTML5--web存储/应用缓存/web Workers/服务器推送事件一(12)

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/diweikang/p/9006052.html

文章标签：

#javascript #ui #php #ViewUI

本文详细介绍了HTML5中新增的web存储、应用缓存、webWorkers及服务器推送事件等技术特性。具体包括sessionStorage和localStorage的使用方法，应用缓存的优势及配置方式，webWorkers的原理及实践案例，以及服务器推送事件的实现步骤。

这节继续学习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);
　　 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 "\n\n";
    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>