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>

input queryselector localstorage