HTML５新特性

1、HTML5新特性

(1)、新的语义标签

(2)、增强型表单(表单2.0)

(3)、音频和视频

(4)、Canvas绘图

(5)、SVG绘图

(6)、地理定位

(7)、拖放API

(8)、Web Worker

(9)、Web Storage

(10)、Web Socket

2、HTML5中表单的新特性

(1)、新的input type <input type="?">

H4中的input type：text、password、radio、checkbox、file、hidden、submit、reset、image

H5中的input type：email、url、tel、number、search、range、color、date、month、week

(2)、新的表单元素

H4中的表单元素：input、textarea、select/option、label

H5中新增的表单元素：datalist、progress、meter、output

(3)、表单元素的新属性

3、H5中新增的表单元素 —— datalist （datalist本身不可见）

<datalist id="list3">

</datalist>

datalist为input提供输入建议列表，用户可以从中选取，也可以手工输入

4、H5中新增的表单元素 ——progress（显示一个进度条），有两种形式：

(1)、<progress></progress>左右晃动的进度条

(2)、<progress value="0.7"></progress>具有指定进度值的进度条

5、H5中新增的表单元素 ——meter

Meter：度量衡、刻度尺，用于标示一个值所处的范围：不可接受(红色)、可以接受(黄色)、非常优秀(绿色)

6、H5中新增的表单元素 ——output

output：输出，语义标签，没有任何外观样式，样式上等同于SPAN

商品单价: ￥3.50

购买数量：<input type="number" value="1">

小计：<output>￥3.50</output>

7、H5表单新特性 —— 表单元素的新属性

H4中表单元素的属性：<input ?>

id、class、title、style、type、value、name、readonly、disabled、checked

H5中表单元素的新属性：

(1)、placeholder：占位字符

(2)、autofocus：自动获取输入焦点

<input autofocus>多个属性只有一个可以获得焦点

(3)、multiple：允许输入框中出现多个输入（用逗号分隔），如邮箱输入域

<input type="email"multiple>可实现输入多个值，中间用逗号分割

(4)、form：用于把输入域放置到FORM外部

(5)、autocomplete:on/off,自动补全，是否自动记录之前提交的数据，以用于一下次输入建议

====输入验证相关的新属性======

(6)、required：必填项，内容不能为空

(7)、maxlength：指定字符串的最大长度

(8)、minlength：指定字符串的最小长度

<input minlength="6">不是HTML5S标准属性，仅部分浏览器支持(Chrome)

(8)、max：指定数字的最大值

(10)、min：指定数字的最小值

<input　min="18">

(11)、pattern：指定输入必需符合的正则表达式

<input pattern="1[35789]\d{9}">此处的正则开头不用写“^”，结尾不用“$”

上述验证属性会影响表单元素对应的JS对象的validity属性

(12)、step：限定输入的数字的步长，与min属性连用

8、如何定制表单2.0中的错误提示消息内容——难点&掌握

HTML5为每个标签对应的JS对象添加了新属性，以标识用户输入的有效性：

input.validity {

badInput：false，无效的输入，如email输入无效

typeMismatch：false，类型不匹配，如number中出现字符

valueMissing：false，值缺失，如required验证失败

tooLong：false，输入的内容超过maxlength限制

tooShort：false，输入的内容不满足minlength限制

rangeOverflow：false，输入的数字超过max

rangeUnderflow：false，输入的数字不满足min

stepMismatch：false，步长不匹配

patternMismatch：false，正则表达式不匹配

customError：false，是否存在自定义错误

valid：true，输入值是否有效

}

注意：

(1)、最后的validity.valid属性，只有其它属性都为false（没有任何错误），valid值为true；否则只要任何一个其它属性为true（说明有某方面的错误），valild值为false

(2)、上述属性的值会随着输入域中值的改变而立即改变，无需等到表单提交

(3)、使用input.setCustomValidity('XXX')可以生成一个自定义错误消息，使得validity.customError属性变为true；若执行input.setCustomValidity('')可以删除自定义错误消息，使得validity.customError属性变为false，通常用if else结合做判断

(4)、自定义错误消息的优先级高于任何系统自带的错误消息优先级

9、Flash被H5取代体现在哪些方面？

Flash绘图(AS/Flex) => Canvas/SVG

Flash动画 => 定时器+Canvas

Flash视频和音频播放 => VIDEO/AUDIO

Flash客户端存储 => WebStorage

10、H5新特性——视频播放video(高清、体积大、资源不安全)

以下为兼容各个浏览器的写法

<video>

您的浏览器不支持VIDEO播放！

</video>

它本身是一个300*150的inline-block元素

VIDEO标签/对象常用的成员：

(1)、成员属性

①、autoplay：false，是否自动播放

②、controls：false，是否显示播放控件,不同浏览器的播放控件不一样

③、loop：false，是否循环播放

④、muted：false，是否静音播放

⑤、poster：''，在播放第一帧之前显示的海报

⑥、preload：视频的预加载策略，可取值：

A、auto：预加载视频的元数据以及缓冲一定时长

B、metadata：仅预加载视频的元数据(尺寸、时长、第一帧内容)，没有视频缓冲

C、none：不预加载任何数据

--------JS对象属性,不能用于标签--------------

①、currentTime：当前播放的时长

②、duration：总时长

③、paused：true，当前视频是否处于暂停状态

④、volume：1，当前音量

⑤、playbackRate：1，回放速率，大于1表快放，小于1表慢放

(2)、成员方法

①、play( )：播放视频

②、pause( )：暂停播放

(3)、成员事件

①、onplay：当视频开始播放时触发的事件

②、onpause：当视频开始暂停时触发的事件

11、H5新特性——音频播放audio(苹果IOS10不支持,可用video代替）

H5提供了一个新的标签用于播放音频：

以下为兼容各个浏览器的写法：

<audio>

您的浏览器不支持AUDIO播放！

</audio>

默认是一个300*30的inline-block元素，但若没有controls属性,则display:none

AUDIO标签/对象常用的成员：

(1)、成员属性：

①、autoplay：false，是否自动播放

②、controls：false，是否显示播放控件

③、loop：false，是否循环播放

④、muted：false，是否静音播放

⑤、preload：视频的预加载策略，可取值

A、auto：预加载视频的元数据以及缓冲一定时长

B、metadata：仅预加载视频的元数据(尺寸、时长、第一帧内容)，没有视频缓冲

C、none：不预加载任何数据

------------JS对象属性---------------------

①、currentTime：当前播放的时长

②、duration：总时长

③、paused：true，当前视频是否处于暂停状态

④、volume：1，当前音量

⑤、playbackRate：1，回放速率，大于1表快放，小于1表慢放

(2)、成员方法

①、play( )：播放视频

②、pause( )：暂停播放

(3)、成员事件

①、onplay：当视频开始播放时触发的事件

②、onpause：当视频开始暂停时触发的事件

12、网页中可用的绘图技术

网页中的实时走势图、统计图、在线画图板、网页游戏、地图应用都要使用到绘图技术，有三种绘图技术:

(1)、SVG绘图：2D矢量绘图技术，2000年出现，后纳入H5标准

(2)、Canvas绘图：2D位图绘图技术，H5提出的绘图技术

(3)、WebGL绘图：3D绘图技术，尚未纳入H5标准

13、H5新特性——Canvas绘图技术

Canvas：画布，是H5提供的2D绘图技术

您的浏览器不支持Canvas标签！

</canvas>

canvas标签在浏览器中默认是300*150的inline-block

画布的宽和高只能使用HTML/JS属性来赋值，不能使用CSS样式(style)赋值

每个画布上有且只有一个“画笔”对象，称为“绘图上下文”对象，使用该对象进行绘图

var ctx = canvas.getContext('2d') //得到画布上的画笔对象

(1)、使用Canvas绘制矩形，矩形的定位点在自己的左上角

①、ctx.lineWidth = 1 描边宽度

②、ctx.fillStyle = '#000' 填充样式/颜色

③、ctx.strokeStyle = '#000' 描边样式/颜色

④、ctx.fillRect( x, y, w, h ) 填充一个矩形

⑤、ctx.strokeRect( x, y, w, h ) 描边一个矩形

⑥、ctx.clearRect( x, y, w, h ) 清除一个矩形范围内所有的绘图

(2)、使用Canvas绘制文本

一段文字的定位点在其文本基线的起点

①、ctx.textBaseline = 'top' 文本基线改为顶端起始

②、ctx.font = '12px sans-serif' 文本大小和字体

③、ctx.fillText( str, x, y ) 填充一段文本

④、ctx.strokeText( str, x, y ) 描边一段文本

⑤、ctx.measureText( str ) 基于当前文字大小字体设置测量文本，返回一个有用对象：{width: x},可以实现绘制文本右对齐,使用时ctx.measureText( str ).width

14、Canvas绘图中使用渐变对象

(1)、线性渐变：linearGradient

(2)、径向渐变：radialGradient

可以参考PS中的渐变效果。

var g = ctx.createLinearGradient( x1, y1, x2, y2 );//创建渐变区域

g.addColorStop( offset, color ); //创建渐变节点

ctx.strokeStyle = g; //使用渐变对象

ctx.fillStyle = g; //使用渐变对象

15、Canvas的尺寸不能用CSS指定

使用CSS指定的Canvas尺寸，实际不是修改了画布尺寸，而是进行了拉伸，上面的绘图内容也会随着进行拉伸

可以使用HTML标签的width和height属性，也可以使用JS对象的width和height属性

16、使用Canvas进行绘图 —— 路径

Path：类似于PS中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、“填充”、“裁剪”

ctx.beginPath() 开始一条新路径

ctx.closePath() 闭合当前路径

ctx.moveTo(x, y) 移动到指定点

ctx.lineTo(x, y) 从当前点到指定点画直线

ctx.arc(cx, cy, r, start, end) 绘制圆拱路径

ctx.stroke() 对当前路径描边

ctx.fill() 对当前路径填充

ctx.clip() 使用当前路径进行裁剪

17、使用Canvas进行绘图--图像

Canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，且等待图片异步加载完成：

var p3 = new Image()；

p3.src = 'img/p3.png'； //浏览器会自动异步请求图片

console.log(p3.width)； //0

p3.onload = function(){ //图片加载完成

console.log(p3.width)； //200

//开始绘制图片到画布上....

ctx.drawImage( p3, x, y )； //原始大小绘图

ctx.drawImage( p3, x, y, w, h )； //拉伸绘图

}

18、Canvas绘图核心知识点总结

(1)、绘制矩形： ctx.fillRect() ctx.strokeRect() ctx.clearRect()

(2)、绘制文本：ctx.fillText() ctx.strokeText() ctx.measureText().width

(3)、绘制路径：ctx.beginPath() ctx.closePath() ctx.moveTo()

ctx.lineTo() ctx.arc() ctx.stroke() ctx.fill() ctx.clip()

(4)、绘制图像：ctx.drawImage()

19、使用Canvas绘图时进行变形操作

CSS中有变形相关样式： transform: rotate/scale/translate/skew，这些变形只能作用于某个HTML元素

Canvas绘图中也有变形技术，可以针对某一个图像/图形的绘制过程进行变形：rotate、scale、translate

(1)、ctx.rotate( 弧度 ) 旋转绘图上下文对象(即画笔),轴点是画布的原点

(2)、ctx.translate(x, y)　将整个画布的原点平移到指定的点

(3)、ctx.save() 　保存画笔当前的所有变形状态值（游戏中从存盘）

(4)、ctx.restore() 恢复画笔变形状态到最近的一次保存（游戏中读取存盘）

20、第三方绘制统计图工具

(1)、Chart.js：免费的，提供了八种统计图表

(2)、FusionCharts.js：收费的，提供了90+中统计图表

(3)、ECharts：百度提供的免费的绘图工具，与地图整合的很好

(4)、FreeCharts ....

提示：第三方工具使用无需记忆！重点掌握自学的过程：

(1)、打开官网，查看说明

http://www.chartjs.org/

(2)、仿照DEMO编写示例

开源免费的、8种图表、基于H5 Canvas、支持响应式

(3)、在实际项目中加以应用，查看详细API说明

您的浏览器不支持Canvas绘图！

</canvas>

new Chart(c15, {

type: 'bar',//line、pie、noughnut...

data: {},

options: {}

});

</script>

21、位图(Photoshop)：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻，但放大会失真

矢量图(Illustrator)：由一个又一个线条组成，每个线条可以指定颜色、方向，可以无限缩放，但细节不够丰富

22、HTML5新特性——SVG绘图(Scalable Vector Graph：可缩放的矢量图)

	Canvas绘图	SVG绘图
类型	2D位图	2D矢量图
如何	使用JS代码绘图	使用标签绘图
事件	每个图形不是元素无法直接绑定事件	每个图形都是元素，可以直接绑定事件监听
场合	统计图、游戏	统计图、图标、地图

SVG技术诞生于2000年，早期作为XML的扩展应用出现；H5标准把常用的SVG标签采纳为标准，但有些被废弃掉

SVG技术在HTML5出现之前的使用方法：

(1)、在一个XML文档中声明要绘制的图形

(2)、再编写HTML文档，使用IMG/IFRAME应用XML文档即可

SVG技术在HTML5出现之后的使用方法：

直接创建HTML5文档，在其中书写SVG标签即可

SVG技术在HTML5中绘制图形命令(所有的SVG标签的nodeName都是小写,只有填充色，没有描边色)

(1)、使用SVG标签绘制矩形：<rect>

(2)、使用SVG标签绘制圆形：<circle>

(3)、使用SVG标签绘制椭圆：<ellipse>

(4)、使用SVG标签绘制直线：<line>

(5)、使用SVG标签绘制折线：<polyline>

(6)、使用SVG标签绘制多边形：<polygon>

23、补充：Canvans上如何按照特定的顺序绘制图片

Canvas绘图中若需要多张图片，他们的加载都是异步的，无法预测哪一张先加载完成！但是绘图往往需要按照一定顺序，如先绘背景，再绘上面的内容,所以必须等待所有图片全部加载完成，才能开始绘图.

var progress = 0; //所有图片的总加载进度

var imgBg = new Image();

imgBg.src = 'img/bg.jpg';

imgBg.onload = function(){

progress += 40; //为每张图片按大小设置一个权重值

if(progress===100){

startDraw();

}

var imgDisc = new Image();

imgDisc.src = 'img/disc.png';

imgDisc.onload = function(){

progress += 60; //为每张图片按大小设置一个权重值

if(progress===100){

startDraw();

}

24、补充：如何为Canvas上的图形/图像绑定事件监听

网页中只能为HTML元素绑定监听函数，Canvas上的图形/图像都是用JS绘制的，不是DOM元素，不能直接进行事件绑定

只能绑定给整个Canvas！然后再具体计算事件发生坐标是否处于某个图像/图形内部——仅适用于规则图像/图形

25、SVG图形中为元素绑定事件监听

SVG图形中每个图形/图像都是一个标签，可以很方便进行事件绑定

SVG绘图的特点——着重注意！

(1)、所有的图形默认只有填充色（黑色），没有描边色

(2)、SVG图形的样式可以用元素属性声明，也可以用CSS形式来声明，但用CSS声明时，只能使用SVG专用的样式，不能使用CSS样式，如边框设置只能用stroke，而不用border！

(3)、图形可以使用JS来对属性赋值；但不能使用HTML DOM形式，只能用核心DOM操作，如：

r.x = 10; r.width = 100; //无效

r.setAttribute('x', 10); r.setAttribute('width', 100) //有效

(4)、动态添加SVG图形可以使用两种方式：

①、HTML字符串拼接

var html = `<rect></rect>`;

svg.innerHTML = html;

②、使用document.createElementNS('http://www.w3.org/2000/svg','标签名')创建

26、使用SVG进行绘图——矩形

</rect>

27、使用SVG进行绘图——圆形

</circle>

28、使用SVG进行绘图——椭圆

29、使用SVG进行绘图——直线(必须要指明stroke才有效果)

30、提示：若多个SVG图形有完全一样的属性，可以抽出来，放在一个公共的父元素中（小组）

</g>

31、使用SVG进行绘图——折线(一条折线上可以有任意多个连续的点)

32、使用SVG进行绘图——多边形

<polygon　points="50,50 100,300 ..."fill=""></polygon>

33、使用SVG进行绘图——文本

SVG画布上不允许使用普通的HTML元素绘制文本，如SPAN、P等！只能用<text>

34、使用SVG进行绘图——图像

SVG画布不能使用IMG置于SVG画布上！只能使用<image>,必须有宽和高,此为图片的空间大小,图片大小的长宽比例不会发生变化，图片放大会失真

35、补充小知识：如何在SVG中使用渐变

<defs> //定义特效对象(必须)：渐变对象属于一种特效对象

</linearGradient>

</defs>

36、补充小知识：如何在SVG中使用滤镜

<defs>

</filter>

</defs>

SVG中支持的所有滤镜：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

37、第三方绘图工具库 —— Two.js

(1)、打开官网，查看说明https://two.js.org/

Two.js是一个2D绘图函数库，提供了一套API，可用于不同的技术下的绘图，如SVG/CANVAS/WEBGL

(2)、参考DEMO，编写示例

var two = new Two({ }).appendTo(box);

var c = two.makeCircle(200,200,100); //绘制一个圆形

var r = two.makeRectangle(600,200, 200,200); //绘制矩形,定位点在矩形中心

two.update(); //把绘图对象中的内容绘制到DOM树

(3)、查看API，在项目中加以应用

38、HTML5新特性之六 —— 地理定位

Geolocation：地理定位，使用JS获取当前浏览器所在的地理坐标（经度、维度、海拔、速度）数据，用于实现LBS应用(Location Based Service)，如饿了么、高德导航... 手机浏览器如何获得定位信息：

(1)、首选手机中的GPS芯片与卫星通信，定位精度在米

(2)、次选手机通信基站进行定位获取，定位精度在公里

PC浏览器如何获得定位信息：

通过IP地址进行反向解析，定位精度取决于IP地址库的大小

HTML5中提供了一个新的对象，用于获取当前浏览器的定位信息：

window.navigator.geolocation{

getCurrentPosition: fn, 获得当前定位信息

watchPosition: fn, 监视定位数据的改变

clearWatch: fn取消监视

}

获得客户端的定位信息：

navigator.geolocation.getCurrentPosition(

(pos)=>{ pos.coords.latitude pos.coords.longitude },

(err)=>{ err.code err.message }

)

39、扩展小知识：在网页中如何嵌入百度地图

(1)、注册百度开发者账号

http://lbsyun.baidu.com/

(2)、创建一个网站；登录百度地图，为网站申请一个地图的AccessKey

http://lbsyun.baidu.com/apiconsole/key

(3)、在自己的网页中嵌入百度地图提供的API，嵌入百度地图

官方手册：http://lbsyun.baidu.com/index.php?title=jspopular

var map = new BMap.Map("container"); // 创建地图实例

var point = new BMap.Point(116.300829,39.915836); // 创建点坐标

map.centerAndZoom(point, 17); // 以指定点为中心并缩放

40、HTML5新特性之七 —— 拖放API

(1)、拖动的源对象(会动)可以触发的事件：

①、dragstart：拖动开始

②、drag：拖动中

③、dragend：拖动结束

整个拖动过程： dragstart*1 + drag*n + dragend*1

(2)、拖动的目标对象(不动)可以触发的事件：

①、dragenter：拖动着进入(取决于鼠标进入没有)

②、dragover：拖动着悬停在上方

③、dragleave：拖动着离开

④、drop：在上方释放

整个拖动过程1： dragenter*1 + dragover*n + dragleave*1

整个拖动过程2： dragenter*1 + dragover*n + drop*1

注意：必须阻止dragover的默认行为，drop才可能触发！

(3)、如何在拖动的源对象和目标对象间传递数据?

①、方法一,使用全局变量，便会造成全局污染

②、使用拖放对象的dataTransfer属性

p3.ondragstart = function(e){ //拖动的源对象

e.dataTransfer.setData('pid', 'this.id') //往拖拉机中装数据

};

chosen.ondrop = function(e){ //拖动的目标对象

var data = e.dataTransfer.getData('pid'); //从拖拉机中读取数据(this.id)

console.log(data);

};

chosen.ondragover = function(e){

e.preventDefault();

}

(4)、如何在服务器端下载的网页中显示客户端的图片?

一般情况下，网页只能显示服务器上的图片，HTML5中，可以实现用户拖拽一张本地的图片显示在服务器端下载的网页中

HTML中提供的用于文件输入输出（I/O）对象：

File：代表一个文件/目录对象

FileList：代表一个文件列表（类数组对象）

FileReader：用于从文件中读取内容

FileWriter：用于向向文件写出内容

核心代码:

container.ondrop = function(e){

var f0 = e.dataTransfer.files[0];

var reader = new FileReader();

reader.readAsDataURL(f0);

reader.onload = function(){

//读取完成，数据在reader.result中

}

41、HTML5新特性之八 —— Web Worker

(1)、程序：Program，指可被CPU执行的代码，存储在外存中

(2)、进程：Process/Task，指程序被OS调入内存，分配执行空间，随时供CPU调度执行

(3)、线程：Thread，线程是进程内执行代码基本单位

(4)、进程和线程关系

①、进程是操作系统分配内存的基本单位；

②、线程是CPU执行代码的基本单位；

③、线程必须处于某个进程内部；

④、一个进程内必须至少有一个线程；也可以有多个；

⑤、一个操作系统中可能同时存在几千个线程，它们是“并发执行的”—— 宏观上看同时执行，微观上看是依次循环执行

42、Chrome浏览器中的线程模型

一个Chrome进程内，至少有6个线程，可以“同时/并发”向Web服务器发起HTTP请求，以获得所需的资源——资源请求线程

还有一个线程负责将所有内容绘制到浏览器页面中——UI主线程——不允许多线程同时绘图，防止内容布局错乱

43、创建新线程

<button onclick="console.log(2)">按钮

现象：上述JS执行过程中，按钮1可见，但点击无效；按钮2不可见

原因：浏览器中执行代码的只有一个线程——UI主线程

解决办法：创建新的线程，由它来执行耗时的JS任务；UI主线程继续执行后续的HTML渲染，代码如下:

var w = new Worker('1.js')

</script>

44、在拖动源对象和目标对象间传递数据，拖动开始时(src.ondragstart)记录被拖动元素的ID，释放时(target.ondrop)根据ID查找拖动的源对象，进行相关操作:

方法1：使用一个全局变量 —— 造成全局对象的污染

方法2：使用H5拖放API专供的e.dataTransfer（数据传递）

src.ondragstart = function(e){ //拖动的源对象

e.dataTransfer.setData('key', 'value') //海南：存储数据

}

target.ondrop = function(e){ //拖动的目标对象

var data = e.dataTransfer.getData('key'); //东北：读取数据(value)

}

45、HTML5新特性之八——WebWorker——代码就3行，重点在理论理解

进程：操作系统分配内存的单位 —— 工厂

线程：处于进程内部，用于执行代码 —— 生产线

线程并发：操作系统中所有的线程宏观上看“同时执行”；微观上看是“依次交替执行”

Chrome中的线程模型：请求资源——6个线程；运行代码/渲染页面内容——1个线程

上述代码中若x.js很耗时，按钮1无法点击，按钮2在运行js过程中不可见——所有的代码(HTML/CSS/JS)都在单线程(UI主线程)中执行

解决方案：创建一个并发执行的新线程，让它来执行耗时的JS任务

46、Worker线程的致命缺陷

浏览器不允许Worker线程操作任何的DOM&BOM对象！！

原因：浏览器只允许UI主线程操作DOM&BOM！若多个线程同时都可以操作DOM结构，页面将混乱，所以，类似jQuery的脚本决不能使用Worker来加载执行

UI主线程可以给Worker线程发数据消息：

UI主线程：

var w6 =new Worker('6.js');

w6.postmessage(stringMsg)

Worker线程：

onmessage = function(e){ e.data }

Worker线程可以给UI主线程发数据消息：

UI主线程：

var w6 =new Worker('6.js');

w6.onmessage = function(e){ e.data }

Worker线程：

postMessage(stringMsg)

47、Worker在项目中的使用场景

(1)、只要js中有DOM&BOM就不能用Worker！

(2)、Worker适合于执行耗时的JS任务！如复杂计算、加密和解密、大数据统计、路径规划......

48、HTML5新特性之九 —— WebStorage

在浏览器中存储当前用户专有的数据：访问历史、内容定制、样式定制...

在客户端存储数据可以使用的技术：

(1)、Cookie技术：浏览器兼容性好；不能超过4KB，操作复杂

(2)、Flash存储：依赖于Flash播放器

(3)、H5 WebStorage：不能超过8MB，操作简单

(4)、IndexedDB：可存大量数据，还不是标准技术

49、Session：会话，浏览器从打开某个网站的一个页面开始，中间可能打开很多页面，直到关闭浏览器，整个过程称为“浏览器与Web服务器的一次会话”

WebStorage技术中，浏览器为用户提供了两个对象：

(1)、window.sessionStorage：类数组对象，会话级数据存储

在浏览器进程所分得的内存存储着一次Web会话可用的数据，可供此次会话中所有的页面共同使用；浏览器一旦关闭就消失了

作用：在同一个会话中的所有页面间共享数据，如登录用户名

sessionStorage[key] = value //保存一个数据

sessionStorage.setItem(key, value) //保存一个数据

var v = sessionStorage[key] //读取一个数据

var v = sessionStorage.getItem(key) //读取一个数据

sessionStorage.removeItem(key) //删除一个数据

sessionStorage.clear() //清除所有数据

sessionStorage.length //数据的数量

sessionStorage.key(i) //获取第i个key

(2)、window.localStorage：类数组对象，本地存储(跨会话级存储)

在浏览器所能管理的外存(硬盘)中存储着用户的浏览数据，可供此次会话以及后续的会话中的页面共同使用；即使浏览器关闭也不会消失——永久存在

作用：在当前客户端所对应的所有会话中共享数据，如登录用户名

localStorage[key] = value //保存一个数据

localStorage.setItem(key, value) //保存一个数据

var v = localStorage [key] //读取一个数据

var v = localStorage.getItem(key) //读取一个数据

localStorage.removeItem(key) //删除一个数据

localStorage.clear() //清除所有数据

localStorage.length //数据的数量

localStorage.key(i) //获取第i个key

localStorage中若数据发生了修改，会触发一次window.onstorage事件，可以监听此事件，实现监视localStorage数据改变的目的，用于在一个窗口中监视其它窗口中对localStorage数据的修改——不能监视sessionStorage数据的修改

50、HTML5新特性之十 —— WebSocket——代码不复杂重点在原理的理解

HTTP协议：属于“请求-响应”模型，只有客户端发起请求消息，服务器才会返回响应消息，没有请求就没有响应, 一个请求，只能得到一个响应，有些场景中，此模型就力不从心了：实时走势应用、在线聊天室

常见解决方案为使用长轮询(Long-Polling)/心跳请求——定时器+AJAX——请求过于频繁，服务器压力过大；不够频繁，客户端数据延迟较大

WebSocket协议：属于“广播-收听”模型，客户端连接到服务器就不再断开，永久的连接，双方就随时向对方发送消息，且是全双工不对等发送。WS协议在实时走势应用、在线聊天室应用中有着特别的优势

WS协议的应用程序也分为客户端程序和服务器端程序：

WS服务器端应用：

监听指定端口，接收客户端请求，向对方发消息，并接收消息；可以使用php/java/node.js等语言编写,php编写的socket_server无需依赖apache服务器，直接启动php.exe，启动前记得修改php.ini文件的907行!去掉开头的分号(extension=php_sockets.dll)

WS客户端应用：

主动发起连接请求，保持永久的连接，向对方消息，并接收消息，可以使用php/java/node.js/html5等语言编写

51、使用Node.js创建WS协议的服务器

node.js官方没有提供ws协议的模块，必须使用NPM下载第三方ws协议模块： npm i ws，查看README,编写WS协议的服务器

52、掌握：使用HTML5创建WS协议的客户端应用

//连接到WS服务器

var socket = new WebSocket('ws://127.0.0.1:9001')

//向服务器发消息

socket.send(stringMsg)

//接收服务器发来的消息

socket.onmessage = function(e){

e.data //消息内容

}

//断开到WS服务器的连接

socket.close();

猜你喜欢