HTML5提供的新功能概要

classList：现在element加入了classList属性，用于访问其class列表，比如想要切换一个目标的css big类，则调用target.classList.toggle("big")即可

 

storage：使用localStorage可以保存数据至本地，用于不同时间不同窗口间的通信，而sessionStorage则是临时保存数据，当关闭该页面时清空。storageEvent可以用于各个订阅事件 .

addEvent(window, 'storage', function (event) {
    if (event.key == 'storage-event-test') {
        output.innerHTML = event.newValue;
    }
});

 

history API:

A) history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为当前页地址； 
B) history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上； 
C) history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样； 
D) window.onpopstate：响应pushState或replaceState的调用；
有 了这几个新的API，针对支持的浏览器，我们可以构建用户体验更好的应用了。就像Facebook相册，虽然是AJAX的方式，但用户可以直接复 制页面地址分享给好友，好友打开看到的就是AJAX加载的数据，做到了书签化。当然这里面需要做的工作远不是说的这么简单。

 

data-set: 现在每个element可以有若干个以data开头的attribute，比如data-height可以用element.dataset.height来访问

 

file API：在html5里，我们可以使用fileAPI来有限访问本地文件系统，构建诸如文件拖放至浏览器进行预览与上传之类的功能

 

web socket：聊天、页游...后台可以用node.js

 

placeholder：搜索框里显示一行提示，这个本来要用js实现的，现在简单的变成了一个attr

 

canvas：没啥好说的，绘图

 

video：视频，flash不再必须，不知道性能和功能怎么样

 

content editable：通过设置一个div属性 contenteditable="true"，可以简单的使该区域变得可以编辑，结合localStorage，编辑文档并临时保存至本地不再是神话，但是在chrome16上进行测试发现可编辑区域中文输入法有问题，可以粘贴中文但不能直接输入...

 

geolocation：访问你所在的地理位置哦，需要用户同意

if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
        alert("latitude:" + position.coords.latitude + "longitude:" + position.coords.longitude);
    },
    function(msg){
    });
}

 

postMessage：两个iframe间使用postMessage来通讯，可以同域甚至跨域

 

drag&drop：再也不用js实现拖拽了，一句话 draggable=“true”

 

online&offline：现在window多了两个event，online和offline，用法自己琢磨吧，貌似bug还很多，可以用来让网页支持离线模式

 

web sql：web上执行sql呗，这个需求难道来自不愿使用分层架构的web开发者？

var db = openDatabase('foo', '1.0', 'foo', 2 * 1024);
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');  
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "foobar")');
  document.querySelector('#status').innerHTML = '<p>foo created and row inserted.</p>';
});

db.transaction(function (tx) {
  tx.executeSql('DROP TABLE foo');
  
  // known to fail - so should rollback the DROP statement
  tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "foobar")');
}, function (err) {
  document.querySelector('#status').innerHTML += '<p>should be rolling back caused by: <code>' + err.message + '</code></p>';
});

db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
    document.querySelector('#status').innerHTML += '<p>found rows (should be 1): ' + results.rows.length + '</p>'; 
  }, function (tx, err) {
    document.querySelector('#status').innerHTML += '<p>failed (rollback failed): <em>' + err.message + '</em></p>';
    document.querySelector('#status').className = 'error';
  });
});

 

web worker：类似form编程中的background worker，伪多线程式的执行后台计算，不卡死前台UI。但在chrome16中测试发现初始化时仍然有一段时间界面失去响应

 

details：使用details标签，可以由浏览器自动将其内容隐藏，而只是显示summary，前端动画可以不用js