Web数据存储及应用缓存以及web worker

最新推荐文章于 2024-06-06 13:23:13 发布

byd666

最新推荐文章于 2024-06-06 13:23:13 发布

阅读量1k

点赞数

分类专栏： html5 js

本文链接：https://blog.csdn.net/bydbbb/article/details/76316979

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

1.客户端存储数据的两种方式

1.1:localStorage
没有时间限制的数据存储
1.2:sessionStorage
针对一个session的数据存储，限定的边界是当浏览器关掉之后存储的数据是会被清除的。

2.与cookie作对比

之前这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为他们由每个服务器的请求来传递，这使得cookie速度很慢，而且效率不高。
cookie是可以根据自己的需求而做时间限定

3.localStore的创建和访问

<textarea style="width: 200px;height: 200px;" id="ta"></textarea>
    <button id="btn">save</button>
    <script>
        var ta=document.getElementById("ta");
        if(localStorage.text){
            ta.value=localStorage.text;
        }
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            alert(ta.value);
            localStorage.text=ta.value;
        }
    </script>

要点：localstorage是以键值对的形式存储的数据。

4.sessionStorage创建和访问

txt=document.getElementById("sp");
btn=document.getElementById("addBtn");
    if(sessionStorage.num){
        num=sessionStorage.num;
    }else{
        num=0;
    }
    btn.onclick=function(){
        num++;
        sessionStorage.num=num;
        showNum();
    }
}
function showNum(){
    txt.innerHTML=num;
}

5.应用缓存

5.1概念和优势:WEB应用可以进行缓存，并可在没有网的情况下进行访问，

5.2优势：

1. 离线浏览
1. 速度-已缓存的资源加载的更快
1. 减少服务器的负载

5.3实现缓存：

如需启用应用程序缓存，请在文档的标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：”.appcache”。

请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

5.4Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

缓存：

CACHE MANIFEST：
theme.css
index.html
main.js

不缓存：

CACHE NETWORK：
main.js

回退页面：

FALLBACK:
404.html

6.Web Workers

6.1定义

web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能，在我的理解来看，其就相当于在主线程中开启一个子线程，用这个子线程去处理繁杂的任务，完事之后将结果
返回到主线程更新UI.底层也是利用了多线程能来处理。

6.2方法

postMessage():它用于向HTML页面传回一段消息
terminate():终止web worker，并释放资源。

6.3事件：

onmessage:通过此方法将子线程的结果更新到主线程。

window.onload=function(){
    numDiv=document.getElementById("numDiv");
    document.getElementById("start").onclick=startWork();
    document.getElementById("stop").onclick=function(){
        if(work){
            work.terminate();
            work=null;
        }
    }
}
function startWork(){
    if(work){
        return;
    }
    work=new Worker("count.js");
    work.onmessage=function(e){
        numDiv.innerHTML=e.data;
    }
}

count.js代码如下：

var countNum=0;
function count(){
    postMessage(countNum);
    countNum++;
    setTimeout(count,1000)
}
count();

byd666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录