HTML5基础之九(WebStorage、WebSocket、WebWorker、 Geolocation)

WebStorage

类似cookie,以key/value形式存储,只是WebStorage存储的数据量更大,主要是这个不同。WebStorage分为两种:①localStorage  ②sessionStorage 这个两种存储都是一样的机制,只是前者是永久存储,后者是在关闭文档时被移除。当然还有一种IndexDB数据库,在web浏览器可以通过sql来操作,当然这个目前很多浏览器不支持。都有一个事件来监听值是否改变(storage)

相关的方法如下:

clear(): 清除所有的key/value键值对

getItem(<key>):获取指定键的值

key(<index>):获取key(通过索引)localStorage.key(i)

length属性:获取键值对的数量

removeItem(<key>):移除指定的键值对

setItem(<key>, <value>):设置一个键值对

[<key>]:通过中括号键的方式获取值localStorage[“key”]

 

storage事件对象的属性

key:返回修改的键

oldValue:修改之前的值

newValue:修改后的新值

url:作出修改的文档的url

storageArea:返回修改的Storage对象

这里不再介绍appcache,因为已经从HTML5的标准里面移除了。

浏览器当前支持情况:

 

WebSocket

WebSocket的出现直接是为了解决浏览器和服务器的实时通信,过去使用的方式大多是是轮询的方式来模拟实时通信。WebSocket提供了更好的方式,来实现双向的实时通信。WebSocket最初的定义是TCPConnection,TCP是互联网的基础传输协议,WebSocket是针对Web应用的传输协议,提供双向的有序数据流,非常类似TCP,不同的是WebSocket是连接URL,TCP是连接主机和端口。WebSocket的优势是节省了网络负载,减少网络延时。

客户端和服务器端一次握手就可以建立一个双向通信的连接,客户端端使用很简单:

当然前提是浏览器支持WebSocket以及具有WebSocket的服务器,实现了WebSocket的服务器。

浏览器支持情况:

 

Web Workers API

再说javascript是一个单线程的(浏览器分配的线程),当javascript里面有大量的计算耗费很时间时,会阻塞UI线程,这时界面不能做其他的操作。HTML5引入了Web Workers,提供了类似后台进程的能力,从javascript的线程分离开,这样可以处理具有大量计算的操作,并且利用多核的优势。当然有一些限制,运行在Web Worker里面的线程不能直接访问页面和DOM API,可以通过postMessage来和Web Workers进行通信。下面是一个demo,需要放到服务器上才能测试Worker。

helloWorker.js的代码,同样监听message事件,使用postMessage发送消息

这里很容易产生一个疑问——这里的postMessage是哪个对象的方法?

在Worker里面有一个全局对象WorkerGlobalScope,这个对象不能直接访问,可以通过self来访问,这里可以写成self.postMessage()或者是this.postMessage()

 

浏览器支持情况:

 

Geolocation

这个对象用来获取地理位置,需要浏览器允许才行。使用方法如下:

作者:张雪飞
出处:https://zhangxuefei.site/p/1266
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注