ppk同学维护的兼容性列表:http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档:https://developer.mozilla.org/en/DOM/Storage
MSDN文档:http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx
支持:Firefox 3.5+, Safari 4.0+, IE 8.0+
HTML5 Offline Application Cache
用一个manifest文件缓存静态资源(图片,css, js之类)在离线状态下使用,不是结构化数据
<html manifest="foo.manifest">
CACHE MANIFEST
index.html
style/default.css
images/logo.png
w3c标准:http://www.w3.org/TR/offline-webapps/#offline
MDC文档:https://developer.mozilla.org/en/Offline_resources_in_Firefox
支持:Firefox 3.5+
HTML5 Database Storage
本地数据库,支持sql,最早是google gears实现,现在的w3c草案的编辑也是google的工程师……但奇怪的是,gears的api跟现在的草案不兼容,chrome甚至为了保留捆绑的gears的数据库api而删除了webkit实现的html5 api……而google在iphone上实现gmail离线功能的时候又采用webkit的api……真纠结……
var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {});
});
w3c标准:http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介绍:http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
支持:Safari 3.1+
替代/过渡:Gears http://code.google.com/p/gears/wiki/Database2API
HTML5 Web Workers
多线程,在后台执行复杂运算,不能操作dom,线程之间通过消息事件通信
var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) { event.data };
myWorker.postMessage(str);
w3c标准:http://www.w3.org/TR/workers/
MDC文档:https://developer.mozilla.org/En/Using_web_workers
支持:Firefox 3.5+
替代/过渡:Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal
HTML5 Geolocation
地理api
window.navigator.geolocation
w3c标准:http://www.w3.org/TR/geolocation-API/
MDC文档:https://developer.mozilla.org/En/Using_geolocation
支持:Firefox 3.5+
替代/过渡:Gears http://code.google.com/p/gears/wiki/GeolocationAPI
HTML5 Drag and Drop
原生拖拽事件
ondragstart
ondrag
ondragend
//拖拽过程中
ondragenter
ondragover
ondragleave
ondrop
w3c标准:http://www.w3.org/TR/html5/editing.html#dnd
MDC文档:https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
支持:Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+
HTML5 Audio and Video
用html标签来嵌入视频音频的好处并非是“开源格式”,而是“开放性”,让多媒体可以与其他页面元素交互,或者用页面技术去跟视频“mashup”,这种随意组合和交互的能力是web技术兴盛的基石,也是像flash这类封闭RIA容器最大的缺点。
<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
</video>
MDC文档:https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介绍:http://webkit.org/blog/140/html5-media-support/
支持:Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/过渡:用video标签嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/
HTML5 Canvas
apple发明,最早应用于dashboard,目前主流的js图像技术,mozilla已经在实现OpenGL ES标准的Canvas 3D了,另外据说ie team为支持canvas做了大量工作……实际上canvas api相当底层,特别是交互方面,不如svg直观,所以出现了很多封装它的库