html5学习笔记3——高级特性

一：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>