HTML5 API
Web Storage
它提供了一种存储方式，可以让web页面实现在客户端浏览器中意键值对形式在本地保存数据
Cookie存储机制优点
简单易用
浏览器负责传送数据
浏览器自动管理不同站点的Cookie
Cookie缺点
因为他是简单的文本存储数据，所以Cookie安全性很差，保存在客户端浏览器，很容易被窃取
存储内容有限，上线只有4KB
存储Cookie数量有限，多数浏览器上限为30-50个
如果浏览器安全配置为最高级别，nameCookie会失效
Cookie不适合大量数据存储，因为Cookie由每个对服务器的请求来传递，从而造成Cookie速度缓慢效率低下
localStorage
它是一种没有时间限制的存储方式，可以将数据保存在客户端硬盘获其他存储器中
浏览器关闭不会让数据小时，再次打开浏览器，我们依旧可以访问到这些数据，除非我们删除，否则永不过期
sessionStorage
将数据保存在session对象中，web中session指用户浏览某个网站时，从进入到关闭浏览器所经过的时间
session对象在浏览器关闭后，这些数据会被删除
Web Storage优点
提供了易于使用的API接口，只需要设置键值对应即可使用，简单方便
在存储容量方面可以根据用户分配的磁盘配额进行存储，能够在每个用户域存储5MB-10MB内容，用户不仅可以存储session，还可以存储许多信息，如设置偏好，本地化的数据和离线数据等
它提供了JS编程的接口，开发者可以使用JS客户端脚本实现许多以前只能在服务器端才能完成的工作
使用
例
storage事件
key：告诉我们被修改的条目的键
newValue:告诉我们被修改后的新值
oldValue：告诉我们修改前的值
storageArea：告诉我们是本地存储还是会话存储
url：改变键的文档地址
Geolocation
他是html5新增的地理位置应用程序接口，它提供了一个可以准确感知浏览器用户当前位置的方法
子主题 1
Web Worker
它是一项后台处理技术，有了它，用户可以很容易的创建在后台运行的线程，这个线程被称为Worker
ie不支持，Firefox3.5以上支持，Opera10.6以上支持，Chrome3.0以上支持，Safari4.0以上支持
多媒体
为了做到浏览器兼容，我们可以将多媒体文件的路径卸载 source 标签中
如果取药插入视频，我们将audio（音频）标签换成video（视频）标签
相关属性和方法
在JS中，相关的属性和方法：
muted：是否静音，true开启
autobuffer：true后实现自动缓冲
autoplay：设置自动播放
loop：设置后将会重复播放
poster：设置封面，只有video可以，封面只是一张图，没有播放的时候显示的图片
width和height：设置视频的宽高
volune:设置音量
currentTime：获取多媒体当前所播放的具体时间
playbackRate：设置快进或者快退速度的数字值，值为1正常播放
duration：多媒体播放时长
paly：开始播放
pause：暂停播放
volumechange:调整多媒体音量
loadedmetadata：在多媒体所有原数据被加载时会触发该事件
Canvas画图
他是网页上一个矩形单元，可以用JS在上面绘画
添加canvas元素
直线
矩形
圆形
三角
清除
SVG
同上，也是画图工具，在Canvas出来之前，很长一段时间都是用它
SVG意为可缩放矢量图形，它是使用XML格式来定义图像通过SVG画出来的图形是矢量图，在放大或者改变尺寸，他的质量不会损失
优势
它可以被非常多的工具读取和修改（比如记事本）
他和JPEG和GIF图像比较起来，尺寸更小，且可压缩性更强
可伸缩
可在任何分辨率下被高质量的打印
可以在图像质量不下降的情况下被放大
他的文本可选，也可以被搜索（很适合做地图）
可以喝Java技术一起运行
是开放标准
他的文件是纯粹的XML
它的主要竞争者是Flash
绘图
矩形
圆形
椭圆
线
折线
多边形
路径
HTML5 拖放
拖放，就是抓取对象然后拖到另一个位置
源对象和目标对象
源对象：指的是我们鼠标点击的一个事物，可以是一张图片，一个div，或一段文本等等
目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入到这个区域，然后在这个区域上方悬停（未松手），可以是松手释放讲源对象放置此处（已松手），也可以悬停后离开该区域
拖放相关API
源对象
dragstart：源对象开放拖放
drag：源对象拖放过程中（鼠标可能在移动也可能未移动）
dragend：源对象拖放过程结束
过程对象
dragenter：源对象开始进入过程对象范围内
dragover：源对象在过程对象范围内移动
dragleave：源对象离开过程对象的范围
目标对象
drop：源对象被拖放到目标对象内
DataTransfer对象
serData（）：dataTransfer对象中存入数据，接收两个参数，第一个表示存入数据种类的字符串，第二个为要存入的数据
getData（）：他可以从dataTransfer对象中读取数据，参数在为setData中指定的数据种类
clearData（）：清除dataTransfer对象存放的数据，参数可选，为数据种类，如果参数是空的，就清楚所有种类的数据
setDragImage（）：通过img元素来设置拖放图标，第一个为图表元素，第二个为图表元素离鼠标指针的X轴位移量，第三个为图标元素离鼠标指针Y轴位移量
effectAllowed和dropEffect属性:结合起来设置拖放的视觉效果
注：IE不支持data Transfer对象
拖放，例：
Notification
传统桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等方法获取并推送给用户
弊端是：我们在一个网站购物时，不知道另一个网站有消息推送过来，我们必须等用户切换到另一个网站才能知道有消息推送过来，这种方法是基于页面存活的
所以需要用Notification，无论用户当前在看那一个页面，只要有消息，都能推送给用户
例
使用
创建
延时的系统通知
事件处理
Notification.onclick：处理click事件的处理，每当用户点击通知时被触发
Notification.onshow：处理show事件的处理，每当通知显示时被触发
Notification.onerror：处理error事件的处理，每当通知遇到错误时被触发
Notification.onclose：处理close事件的处理，每当用户关闭通知时被触发
