Web Storage本地存储、简单的网页留言板、video元素与audio元素的基础
Web Storage本地存储
在HTML5中，一个新增的非常重要的功能就是可以在本地客户端储存数据的Web Storage功能。
在H4中我们是使用的cookies在客户端保存用户名等等一些简单的用户信息。
cookies的缺点：
1.大小限制在4KB
2.带宽浪费
3.难以操作
为了解决这样一些问题，在H5中重新提供了在客户端保存数据的功能，他就是我们的“Web Storage”。
下面我们来简单了解，sessionStorage和localStorage之间的区别，掌握两者的基本用法。
1.sessionStorage临时保存
就是把数据保存在session对象中。session就是在打开网站到关闭网站之间要求进行保存的数据。
临时保存数据的方法：sessionStorage.setitem('key','value');//或者是sessionStorage.key='value';
临时数据读取的方法：变量=sessionStorage.getitem('key')//或者是sessionStorage.key;
2.localStorage永久保存
就是将数据保存在客户端本地的硬件设备上面，如果浏览器被关闭，这个数据不会丢失，下次打开继续使用。这个功能就是我们的localStorage永久保存功能。
永久保存数据的方法：localStorage.setitem('key','value');//或者是localStorage.key='value';
永久数据读取的方法：变量=localStorage.getitem('key')//或者是localStorage.key;
简单的网页留言板
制作留言板需要使用到的函数有3个
1.saveStorage函数
使用“new Date().getTime()”语句来获取当前的日期和时间戳，然后使用localStorage.setitem将获取到的时间戳作为键值，并将文本框中的数据作为键名进行保存。保存后使用loadStorage函数在页面上显示保存后的数据。
2.loadStorage函数
这个函数取得保存后的所有数据，然后以表格的形式进行显示。
两个重要的属性：
1）loadStorage.length
所有保存在localStorage中的数据条数。
2）localStorage.key(index)
想要得到的数据的索引号作为index参数传入，可以得到localStorage中与这个索引号对应的数据。
3）clearStorage函数
将保存在localStorage中的数据全部清除。
用法：localStorage.clear();
video元素和audio元素
audio元素——在HTML5中专门用来播放网络上的音频。
video元素——在HTML5中专门用来播放网络上的视频或者电影。
使用audio元素和video进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以！
浏览器的支持：
Safaris3以上、Firefox4以上、Opera10以上、Chrome3.0以上版本都对audio元素和video元素支持！
常用属性
1.src属性：在这个属性里边指定媒体数据的URL地址
2.controls属性：指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。
例：<audio src="MP3.mp3" controls="controls"></audio>
3.width和height属性：指定视频的宽度和高度。
例：<video src="time.mp4" width="750" height="400"></video>
4.autoplay属性：这个属性指定是否当我们网页加载完成后就开始自动播放。
5.preload属性：这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放速度。
preload属性的三个值：
none表示不进行预加载
metadata表示只预加载媒体的元数据
auto（默认值）表示预加载全部的视频或者音频
6.poster属性（video独有）：当视频不可以播放的时候，使用poster元素向用户展示一张图片代替视频
例：<video src="video.mp4" poster="video.jpg"></video>
7.loop属性：指定是否循环播放视频或者音频数据
使用方法：<video src="video.mp4" autoplay="video.jpg"></video>
8.error属性：读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性都是null
4种错误状态，返回一个数字值，他表示音频/音频的错误状态：
1 = MEDIA_ERR_ABORTED - 取回过程用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED-媒体不可用或者不支持音频/视频
使用方法
audio元素只需要给他指定一个src属性：
<audio src="MP3.mp3" controls="controls"></audio>
对于不支持的浏览器我们可以在这对元素之间加入提示语句来代表
<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>
video元素只要设定好长宽和src属性就可以了：
<video width="750" height="400" src="time.mp4"></video>
同样对于不支持video的浏览器可以在中间加入替换文字
<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</audio>
source元素指定多个播放器格式与编码：
source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：
<video>
<source src="video.mkv" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogg" type="video/ogg" />
<source src="video.mkv">
</video>
各种设备对编码格式的支持情况在此就不细讲，各位有需要可问度娘哦~
