一：Web存储
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
web存储有两种；
- localStorage - 没有时间限制的数据存储，存于浏览器缓存
- sessionStorage - 针对一个 session 的数据存储，绘画关闭就清理
if(typeof(Storage)!=="undefined")//检查是否支持web存储 { // Yes! localStorage and sessionStorage support! localStorage.key = value //创建内容 localStorage.key //获取内容 sessionStorage.key = value //创建内容 sessionStorage.key //获取内容 } else { // Sorry! No web storage support.. }
二：Web应用缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
1:启用 应用程序缓存
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
2: 编写manifest
manifest 文件是简单的文本文件：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
# 2012-02-21 v1.0.0 注解
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
3:注意
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
三：异步运行脚本
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
//一个js文件 var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
<script> var w; function startWorker() { if(typeof(Worker)!=="undefined")//检查是否支持web worker { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); //创建一个web worker，用一个需要后台运行的js文件作为初始化参数，并运行该文件 } w.onmessage = function (event) {//监听worker的执行结果 document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() //停止运行 { w.terminate(); } </script>
四：接受服务器推送
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。
而现在，通过服务器发送事件，更新能够自动到达，类似于移动App的推送一样。
EventSource 对象用于接收服务器发送事件通知：
if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! var source=new EventSource("接收更新的页面文件"); source.onmessage=function(event) { //每当有推送更新，则调用该事件。 } else { // Sorry! No server-sent events support.. }
五：web sql
Html5数据库API是以一个独立规范形式出现，它包含三个核心方法：
1、openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction：这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql：这个方法用于执行真实的SQL查询。
<script type="text/javascript"> var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); //参数分别为：数据库名、版本号、描述、数据库大小 var msg; db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); }); db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>Found rows: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } }, null); }); </script>