HTML5--web存储/应用缓存/web Workers一(12)

BitTigerio 2018-05-08

这节继续学习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>

相关推荐