// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

Save text value on the client side (crash-safe)

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

var idbRequest = window.indexedDB.open('DatabaseName');
idbRequest.onsuccess = function(event) {
  var db = event.target.result;
  var transaction = db.transaction(['ObjectStoreName'], 'readonly');
  var curRequest = transaction.objectStore('ObjectStoreName').openCursor();
  curRequest.onsuccess = ...;
};
idbRequest.onupgradeneeded = function(event) {
  var db = event.target.result
  var objectStore = db.createObjectStore('ObjectStoreName');
}

// Request Status
webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.TEMPORARY, function(used, remaining) {
    console.log("Used quota: " + used + ", remaining quota: " + remaining);
  }
);
// Request Quota (only for File System API)
webkitStorageInfo.requestQuota(webkitStorageInfo.PERSISTENT, 10 * 1024 * 1024, function(used) {
    console.log("Used quota: " + used + ", remaining quota: " + remaining);
  }
);

main.js:

var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');

task.js:

self.onmessage = function(event) {
  // Do some work.
  self.postMessage("recv'd: " + event.data);
};

窗口的动画不会被 Web Workers打断

点击方块，开始动画。动画使用了 requestAnimationFrame的新方法

点击左边的按钮开始Web Worker

Messages from Worker:

var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
  socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }

在浏览器中实现和服务器端双向通信。双向通信可以拓展浏览器上的应用类型，例如实时的数据推送（股票行情）、游戏、聊天等。

Demo powered by

if (window.Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
}

if (window.Notification && Notification.permission === "granted") {
  var n = new Notification(d.title, {icon: d.icon, body: d.message, tag: d.tag});
}

document.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text', 'Customized text');
  event.dataTransfer.effectAllowed = 'copy';
}, false);

1. 
2. Select text and drag
3. 选择并拖拽文字试试:-)

从文件系统拖入文件

document.querySelector('#dd-dropzone').addEventListener('drop', function(e) {
  var reader = new FileReader();
  reader.onload = function(evt) {
    document.querySelector('img').src = evt.target.result;
  };
  reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);

拖出文件到文件系统

<a href="assets/let_it_go_1.mp4" draggable="true" class="dragout"
   data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>

var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
  file.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
  }, false);
}

仅仅支持Google Chrome

使用Javascript异步的将文件写入沙盒文件系统中

window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
  // fs.root is a DirectoryEntry object.
  fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(writer) {  // writer is a FileWriter object.
        writer.onwrite = function(e) { ... };
        writer.onerror = function(e) { ... };
        var bb = new BlobBuilder();
        bb.append('Hello World!');
        writer.write(bb.getBlob('text/plain'));
    }, opt_errorHandler);
  }
}, opt_errorHandler);

仅仅支持Google Chrome 9+

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(
        position.coords.latitude, position.coords.longitude);
    map.centerAndZoom(point,15); 
  }, errorHandler);
}

需要Google服务，可能无法正常工作，你懂的

window.addEventListener('deviceorientation', function(event) {
  var a = event.alpha;
  var b = event.beta;
  var g = event.gamma;
}, false);

X axis:x Y axis:y Z axis:z

需要 FF3.6+ 或者 Google Chrome 并且设备支持方向传感器

<input type="text" speech x-webkit-speech />

该功能在Chrome中因为安全原因，已经被废弃

新SpeechRecognition，仅支持Chrome 22+

var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function(event) { 
  ......
}
recognition.start();

点击下面的输入框，然后说话试试

var msg = new SpeechSynthesisUtterance('Hello World');
speechSynthesis.speak(msg);

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <figure>
    <img src="..."/>
    <figcaption>Chart 1.1</figcaption>
  </figure>

  <footer>
   Copyright ©
   <time datetime="2010-11-08">2010</time>.
  </footer>
</body>

<input list="cars"/>
<datalist id="cars">
  <option value="BMW"/>
  <option value="Ford"/>
  <option value="Volvo"/>
</datalist>


<menu>
  <command type="command" disabled label="Publish" />
</menu>

<details>
  <summary>HTML 5</summary>
  This slide deck teaches you everything you need to know about HTML 5.
</details>

HTML 5
Web 开发的未来之路

<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is: A+
<progress>working...</progress>
下载：working...
<progress value="75" max="100">3/4 complete</progress>
目标完成：3/4 complete

<link rel="alternate" type="application/rss+xml" href="http://halo9pan.info/feed"/>
<link rel="icon" href="/favicon.ico"/>
<link rel="pingback" href="http://halo9pan.info/xmlrpc.php"/>
<link rel="prefetch" href="http://halo9pan.info/"/>
...

<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://halo9pan.info/category/codeway">CodeWay</a>
...

<template id="template-sample">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>

<script>
var t = document.querySelector('#template-sample');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
</script>

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

<x-foo></x-foo>

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
});

var xFoo = new XFoo();
document.body.appendChild(xFoo);

var MegaButton = document.registerElement('mega-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

<button is="mega-button">

var megaButton = document.createElement('button', 'mega-button');

var megaButton = new MegaButton();
document.body.appendChild(megaButton);

自定义标签名必须包含“-”

<button id="hello-shadow">Hello, Shadow!</button>
<script>
var host = document.querySelector('#hello-shadow');
var root = host.createShadowRoot();
root.textContent = '欢迎来到影子世界！';
</script>

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop="name">Neil</span>.</p>
 <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
 <p>I am <span itemprop="nationality">British</span>.</p>
</div>

已废弃，RDFa替代

<ul id="tree1"
      role="tree" 
      tabindex="0" 
      aria-labelledby="label_1">
  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
  <li role="group">
    <ul>
      <li role="treeitem" tabindex="-1">Oranges</li>
      <li role="treeitem" tabindex="-1">Pineapples</li>
      ...
    </ul>
  </li>
</ul>

<style>
  [required] {
    border-color: #88a;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
  }
  :invalid {
    border-color: #e88;
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  }
</style>

<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel"  placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />

						

<audio id="audio" src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;

<video id="video" src="movie.webm" autoplay controls></video>
document.getElementById("video").play();

<video width="390" id="clip" controls>
  <source src="Google_Developer_Stories.webm" type='video/webm; codecs="vp8, vorbis"' />
  <track label="English subtitles" kind="subtitles" srclang="en" src="video-subtitles-en.vtt" default />
</video>

if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.requestFullScreen){
  elem.requestFullScreen();
}

:-webkit-full-screen-ancestor:root {
  overflow: hidden;
}
:-webkit-full-screen-ancestor {
  z-index: auto;
  -webkit-transform: none;
  -webkit-transition: none;
}
pre:-webkit-full-screen {
  background-color: white;
}

@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}
header {
  font-family: 'LeagueGothic';
}

div {
  text-overflow: ellipsis;
}

Play with the slider on this and further pages!

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px; 
}

  color: hsla(120, 40%, 40%, 0.75); 
  background: hsla(120, 80%, 80%, 0.75); 

color: hsla(
  120 
  40%, 
  40%, 
  1.00 
);

	face{border-radius: 0px}
	left eye{border-radius: 0px}
	right eye{border-radius: 0px}
	base white{border-radius: 0px}
	mouth{border-radius: 0px}
	nose{border-radius: 0px}
	left black eye{border-radius: 0px}
	right black eye{border-radius: 0px}

background-image: linear-gradient(top, 
	hsla(90, 40%, 40%, 0.4) 0%, hsl(90, 40%, 100%) 50%,
	hsl(150, 80%, 100%) 50%, hsla(150, 80%, 20%, 0.6) 100%);

background-image: radial-gradient(center, circle cover, hsla(150, 80%, 40%, 0.8), hsla(90, 40%, 80%, 0.2) 40%);

text-shadow: 
  rgba(64, 64, 64, 0.5) 0px 0px 0px; 
  
  
  

box-shadow: 
  rgba(0, 0, 128, 0.25) 0px 0px 0px; 
  
  
  

text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;

background: 
  -webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));

  border-radius: 0px;

  -webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0)));

Background sizing

#logo {
  background: url(logo.gif) center center no-repeat;
  background-size: 
    
      auto
      contain
      cover
      100%
    ;
}

Resize me! »

Multiple backgrounds

div {
  background: url(assets/zippy-plus.png) 10px center no-repeat, 
              url(assets/gray_lines_bg.png) 0 center repeat-x;
}

-webkit-border-image: url(border_image_1.png) 
20%
40%
15
33
50
 
stretch
repeat
round
 
stretch
repeat
round
;
border-width: 10px;  
						

.box {
  display: -webkit-box;
  -webkit-box-pack:  
      center 
      start 
      end 
    ;
  -webkit-box-align:  
      center 
      start 
      end 
      stretch 
    ;
}

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'go-left'; Left
document.getElementById('box').className = 'go-right'; Right

#box {
  -webkit-transition: margin-left 1s ease-in-out;
}

document.getElementById('box').className = 'go-left'; Left
document.getElementById('box').className = 'go-right'; Right

#threed-example {
  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-30deg);
}

通过类查找元素 (DOM API)

var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

通过CSS选择器寻找页面元素 (Selectors API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td"); // el == tds[0]

<div id="main" class="shadow rounded"></div>

var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');

console.log(el.contains('highlight')); // false
console.log(el.contains('shadow')); // false
console.log(el.classList.toString() == el.className); // true

Output:

<div id="main" class="rounded"></div>

<link rel="prefetch" href="http://halo9pan.info"/>
<link rel="prefetch" href="http://halo9pan.info"/>

document.addEventListener('visibilitychange', function(e) {
  // Start or stop processing depending on state
  if(document.hidden) {
    ...
  }
}, false);

link.addEventListener('click', function(event) {
  // manually add a value to the history stack
  // without making the browser load any new page
  history.pushState('Contact Page Form', 'Contact Page', '/contact');
});

// capture navigation in case we want to change,
// for instance, some content when it changes
window.addEventListener('popstate', function(event) {
  document.querySelector('h1').innerHTML = event.state; // 'Contact Page Form'
});