HTML５新特性

越陌度阡

发布于 2020-11-26 16:18:44

7.7K0

发布于 2020-11-26 16:18:44

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

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：度量衡、刻度尺，用于标示一个值所处的范围：不可接受(红色)、可以接受(黄色)、非常优秀(绿色)

<meter

min="可取的最小值"

max="可取的最大值"

low="合理的下限值"

high="合理的上限值"

optimum="最佳值"

value="当前实际值">

</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：指定数字的最小值

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

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

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

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

8. 如何定制表单2.0中的错误提示消息内容

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

input.validity {

// 无效的输入，如email输入无效

badInput：false，

// 类型不匹配，如number中出现字符

typeMismatch：false，

// 值缺失，如required验证失败

valueMissing：false，

// 输入的内容超过maxlength限制

tooLong：false，

// 输入的内容不满足minlength限制

tooShort：false，

// 输入的数字超过max

rangeOverflow：false，

// 输入的数字不满足min

rangeUnderflow：false，

// 步长不匹配

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取代体现在哪些方面？

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

(2). Flash动画 => 定时器+Canvas

(3). Flash视频和音频播放 => video/audio

(4). 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 );

// 创建渐变节点

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中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、“填充”、“裁剪”

(1). ctx.beginPath()

开始一条新路径

(2). ctx.closePath()

闭合当前路径

(3). ctx.moveTo(x, y)

移动到指定点

(4). ctx.lineTo(x, y)

从当前点到指定点画直线

(5). ctx.arc(cx, cy, r, start, end)

绘制圆拱路径

(6). ctx.stroke()

对当前路径描边

(7). ctx.fill()

对当前路径填充

(8). 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',

data: {},

options: {}

});

</script>

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

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

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

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

(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>

<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);

// 把绘图对象中的内容绘制到DOM树

two.update();

(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){

// 从拖拉机中读取数据(this.id)

var data = e.dataTransfer.getData('pid');

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 οnclick="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){

// 东北：读取数据(value)

var data = e.dataTransfer.getData('key');

}

45. HTML5新特性之八－WebWorker

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

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

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

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

// 获取第i个key

sessionStorage.key(i)

(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

// 获取第i个key

localStorage.key(i)

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){

// 消息内容