web workers及web存储

Web workers 

1. 定义：web workers是运行在后台的JavaScript，独立于其他脚本且不会影响页面的性能。

2. 方法：

                postMessage()----用于向HTML页面传回一段消息

           Terminate()------用于终止web worker 并释放浏览器/计算机资源

3. 事件

           Onmessage

Web 存储

Web存储分为三种类型：

1. 客户端存储数据的新方法。

      其中包含两种方式：（1）localStorage---无时间限制的数据存储

     （2）sessionStorage---针对一个session的数据存储,有时间限制。当用户关闭浏览器窗口时，数据会被删除。

       与cookie相比：cookie不适合存储大量数据，因为他们由每个对服务器的请求来传递，使得cookie速度很慢

    且效率不高。

2. localStorage方法

3. sessionStorage方法

 

webworker应用在主页显示数字累加计算

分析：用两个js文件分别处理主页显示内容，其中index.js处理主页面返回内容，随时更新主页面内容，count.js主要处理页面累加计算功能

index.js:

//处理主页面返回的内容，更新主ui

var numDiv;  var work=null;

window.onload=function(){

numDiv=document.getElementById("numDiv");

document.getElementById("start").onclick=startWorker;

document.getElementById("stop").onclick=function(){

if(work){            //判断主页面数字是否为零或是是否在计数进行中         work.terminate();   //若正在计数则停止

work=null;//必须将work初始化，否则在停止后再开始将不会进行累加操作

}

}

}

function startWorker(){

if(work){return;}

//创建一个Count对象

    var work=new Worker("count.js");    //加载count.js文件

//将数据传递给numDiv,对worker进行监听

work.onmessage=function(e){

numDiv.innerHTML=e.data;

}

}

其中count.js文件内容如下：

//处理累加的内容

var countNum=0;

function count(){

//postMessage方法来回传消息

postMessage(countNum);

countNum++;

setTimeout(countNum,1000);//通过setTimeout来不断执行CountNum每隔一秒执行一次

}

count();

客户端存储数据
var txt; var btn;
window.onload=function(){
 txt=document.getElementById("txt");
 if(localStorage.text){
  txt.value=localStorage.text;
  }
 btn=document.getElementById("btn");
 btn.onclick=function(){
 // alert(txt.value);
 localStorage.text=txt.value;
  }
 
}