您的位置:首页 > Web前端 > HTML5

WebSocket/WebWorker/WebStorage(HTML5的一些新特性)

2017-02-15 15:49 621 查看
WebSocket
protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。

现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP
request,然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据可能只是一个很小的值,这样会占用很多的带宽。

在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器的推送,服务器不再被动的接收到浏览器的request之后才返回数据,而是在有新数据时就主动推送给浏览器。
在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” (handshaking)。

WebWorker

是运行在后台的javascript,不会影响页面的性能。

在HTML页面中运行脚本时,页面状态是不可相应,直到脚本运行结束。如果使用了webworker,用户可以对页面进行点击,选取等,因为webworker运行在服务器,不会影响。

除了IE,所有浏览器都支持webworker。

WebStorage

可以在客户端存储数据,类似于HTML4的cookie,但比cookie更强大。

Web Storage又分为两种:

 sessionStorage
 localStorage

从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地,除非主动删除数据,否则数据是永远不会过期的;不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个方法:
 保存数据:localStorage.setItem( key, value );      sessionStorage.setItem( key, value );
 读取数据:localStorage.getItem( key );     sessionStorage.getItem( key );  
 删除单个数据:localStorage.removeItem( key );     sessionStorage.removeItem( key );
 删除所有数据:localStorage.clear( );     sessionStorage.clear( );
 得到某个索引的key:localStorage.key( index );     sessionStorage.key( index );

两个都有属性 length 表示key 的个数,也即 key 长度:

var keyLength1 = localStorage.length;  var keyLength2  = sessionStorage.length

如上,key 和 value 都必须为字符串,换言之,web Storage的API只能操作字符串。
参考:http://blog.csdn.net/shenzhennba/article/details/8480756
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息