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

来源：互联网发布：云南映象知乎编辑：程序博客网时间：2024/06/06 11:07

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.cssindex.htmlmain.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();

阅读全文

0 0