HTML5总结

HTML5的新特性

用于绘画的canvas元素

用于媒介回访的video和audio元素

对本地离线存储的更好支持

新的特殊内容元素，如 article,footer,header,nav,section

新的表单控件，如calendar,date,time,email,url,search

HTML5 画布

canvas元素为我们使用js绘制图形提供了一种简单又强大的方式，可以用来绘制图表，绘制摄影作品或者一些简单（以及复杂额）的动画

canvas元素初始为空，要显示某物，脚本首先需要访问渲染上下文，然后在上面绘图，canvas元素有一个叫做getContext的DOM方法，用于渲染上下文和它的绘图功能，这个函数接受一个参数，2d上下文类型

var canvas = document.getElementById("my-canvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
//drawing code here.
}else{
//canvas-unsupported code here.
}

注意：

可以使用ExplorerCanvas让IE浏览器支持Canvas，只需引入以下脚本：

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

HTML5 web 存储

会话存储sessionStorage

sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此，sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

本地存储localStorage

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

localStorage和sessionStorage的用法总结

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象，它们均只能存储字符串类型的对象（虽然规范中可以存储其他原声类型的对象，但是目前为止没有浏览器对其进行实现）

localStorage生命周期永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在；sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了

不同浏览器无法共享localStorage或sessionStorage中的信息。相同的浏览器的不同页面间可以共享localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里的页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且属于同源页面，那么它们之间是可以共享sessionStorage的

注意：localStorage和sessionStorage使用相同的API：

//以key为名称存储一个值“value”
localStorage.setItem("keyname","value");
//获取名称为keyname的值
localStorage.getItem("keyname");
//枚举localStorage
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
//删除localStorage中存储信息的方法：
localStorage.removeItem("keyname");//删除名称为“keyname”的信息
localStorage.clear();//清空

HTML5 拖拽

Drag和Drop的过程

步骤一：创建可拖拽对象

具体如下：

1. 如果想要拖动某个元素，需要设置元素的draggable属性为true

2. 给dragstart 设置一个事件监听器存储拖拽数据

3. 事件监听器dragstart 会设置允许的效果（copy,move,link或者是组合形式的）

步骤二：放置对象，为了接受放置，放置目标至少要监听三个事件

具体如下：

1. dragenter 事件，用来确定放置目标是否接受放置，如果放置被接受，那么这个事件必须取消

2. dragover 事件，用来确定给用户显示怎样的反馈信息。如果这个事件被取消，反馈信息（通常是光标）就会基于dropEffect 属性的值更新

3. drop 事件，允许执行真是的放置