最近了解了一下H5新特性，所以来和大家分享一下，今天说一说其中的三个，webWorker、webStorage、webScoket，话不多说，来我们一起来get
webWorker:说到webWorker，我们就得谈一谈程序、进程和线程的概念了，程序是保存在磁盘中的代码，进程是将代码调到内存中执行，并且分配内存空间，而线程就是运行在进程中的代码片段。
之所以讲这三个概念，是因为通常我们浏览网页时，脚本是跟着UI主线程一起运行的，页面的状态是等到脚本运行完才执行的，这就使得有些特殊情况时用户体验是很差的，而webWorker就很好的解决了这个问题，它是独立运行在后台的脚本语言，与主线程区分开，内存会另批一块地给它玩，不会影响页面的加载，当我们在进行用户体验时，它只会在后台默默的运行，是不是挺好的。
那webWorker是怎么使用的呢？来看下面的一个小例子：
HTML部分1：
<button>按钮一</button>
<script src="1.js"></script>
<button>按钮二</button>
HTML2:
<button>按钮一</button>
<script>
var w2 = new Worker("1.js"); //创建一个新线程，让其执行耗时的js任务
w2.onmessage=function(e){
document.getElementById("container").innerHTML= e.data;
}
</script>
<button>按钮二</button>
<div id="container"></div>
JS部分：
var start = new Date().getTime();
do{
var end = new Date().getTime();
}while(end-start<3000);
postMessage(end);
如果我们执行HTML1，就会发现，按钮二是在js任务执行完才显示到我们网页上，这种体验是极差的，而解决的方法就是我们创建一个新的线程w2(如图HTML2)，去执行js任务的话，就不会影响到按钮二的正常显示，是不是很棒。
这是一个webWorker的简单应用，下面我们结合webWorker的特性，即可以实现与主线程之间的数据传输来做一个计算累加和的小案列，代码如下：
HTML部分：
<input type="text" id="inp"/>
<button id="btn">计算累加和</button>
<div id="div"></div>
<script>
var btn = document.getElementById("btn");
var w2 = new Worker("2.js");
btn.onclick=function(){
var num = parseInt(document.getElementById("inp").value);
//console.log(num);
w2.postMessage(num); //通过postMessage方法将input框里的数值传给webWorker线程
w2.onmessage=function(e){ //通过onmessage 方法接收webWorker线程计算好的值
console.log(e.data)
document.getElementById("div").innerHTML= e.data; //显示在网页上
}
}
</script>
webWorker JS部分：
onmessage = function(e){ //接收主线程传来的数字计算累加和
var num = e.data;
for(var i=0,sum=0;i<=num;i++){
sum+=i;
}
postMessage(sum); //将处理好的数据发回至主线程
}
在这里，不知道你们有没有这样的疑问，那就是，在webWorker线程里，为什么还要将数据传输回去，而不是通过DOM直接查找div容器并将值添加进去。这里，之所以不这样做，是因为浏览器只允许UI主线程操作DOM/BOM！若多个线程同时都可以操作DOM结构，页面将变得混乱，不易我们后期维护。
接下来我们说说webStorage ，它是一种客户端存储数据技术，可在在浏览器存储用户浏览网页专用数据，例如：访问历史，购物车，样式等。客户端存储数据有四种方式，它们分别是：
(1)cookie 技术: 浏览器兼容性好;数据不能超4KB;操作复杂
(2)Flash存储：依赖于Flash播放器
(3) WebStorage:不能超过8MB,操作简单
(4)IndexedDB:可存储大量数据，还不是标准技术
今天我们就只说说webStorage , 它为用户提供两个对象以及它们的属性存储数据
1.sessionStorage 类数据对象，会话级数据存储，当会话结束，存储的数据将会消失
sessionStorage[key] = value; //保存数据
sessionStorge.setItem(key,value); //保存数据
var value = sessionStorage[key]; //获取数据
var value = sessionStorage.getItem(key); //获取数据
sessionStorage.removeItem(key); //删除一个数据
sessionStorage.clear(); //清作所有数据
sessionStorage.length; //数据条数
var key = sessionStorage.key(i); //获取第i个key
2.localStorage 类数组对象本地存储 (跨会话级存储),在浏览器所有管理的外存（硬盘）中存储用户浏览数据，可供此次会话及后续会话共同使用。
localStorage [key] = value; //保存数据
localStorage.setItem(key,value); //保存数据
var value = localStorage [key]; //获取数据
var value = localStorage.getItem(key); //获取数据
localStorage.removeItem(key); //删除一个数据
localStorage.clear(); //清作所有数据
localStorage.length; //数据条数
var key = localStorage.key(i); //获取第i个key
这里值得一提的是localStorage中若数据发生了修改，会触发一次onstorage事件，可以监听此事件来判断localStorage中事件是否发生了改变，onstorage事件不能监听sessionStorage数据修改
下面通过几个小列子一一展示：
localStorage示例：
localStorage1 html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.pink{background-color: pink;}
.purple{background-color: purple}
.red{background-color: red}
</style>
</head>
<body>
<a href="localStorage1.html" target="_blank">跳转</a>
<select name="" id="s">
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="red">red</option>
</select>
<script>
var s = document.getElementById("s");
s.onchange = function(){
var style = this.value;
document.body.className = style;
localStorage.setItem("style",style);
}
</script>
</body>
</html>
localStorage2 html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.pink{background-color: pink;}
.purple{background-color: purple}
.red{background-color: red}
</style>
</head>
<body>
<h1>others</h1>
<script>
var style1 = localStorage.getItem("style");
document.body.className = style1;
window.onstorage = function(){ //onstorage事件监听locaStorage中的数据是否发生修改
var s = localStorage.getItem("style");
console.log("数据发生了修改")
document.body.className = s;
}
</script>
</body>
</html>
当第一个html页面的select选项发生修改时，会在locaStorage中保存对应的样式数据，并被html2 get到并加以使用，从而实现了跨会话级存储，纵使浏览器关闭，依然不会消失。
webScoket:
在了解webScoket之前，我们先了解一下http协议的工作方式，因为webScoket和http一样都是一种协议但不同的是，http属于"请求-响应"模型，只有客户端发起请求消息，服务器才会返回响应消息，没有请求就没有响应，一个请求，只能得一个响应，在些场景，此模型就力不从心，而webScoket协议则属于"广播-收听"，客户端连接服务器就不再断开，永久连接，双方可以随时向对方发送消息。
webScoket使用四步走：
(1)连接ws服务器
var socket = new WebSocket("ws://127.0.0.1:9001"); //这里拿本机做服务器端测试
(2)向服务器发消息
socket.send(stringMsg)
(3)接收服务器消息
socket.onmessage = function(e){e.data}
(4)断开连接
socket.close();
通过一个小例子我们来使用一下：
客户端代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">获取连接</button>
<button id="btn2">发送数据</button>
<button id="btn3">断开连接</button>
<script>
var ws = null;
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
ws = new WebSocket("ws://127.0.0.1:9001");
//接收服务器发来消息
ws.onmessage = function(e){
console.log(e.data);
}
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
ws.send("向服务器发送消息");
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
ws.close();
}
</script>
</body>
</html>
服务器端代码：
var ws = require("ws");
var server = new ws.Server({port:9001});
server.on("connection",(scoket)=>{
var counter = 0;
setInterval(function(){
counter ++;
scoket.send(" i am server "+counter);
},1000)
})
至此，三个H5新属性就说完了，很浅，但很容易入门，这三个知识点在以后的开发中用到的可能性还是很大的，希望对你们有用，感谢阅读。
