HTML5 学习笔记(二)

5.web存储

 

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储
这些数据可以在 cookie 中查询到~

 

 

6. 应用程序缓存

cache manifest

 

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

 

请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

 

 

manifest 文件可分为三个部分:

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
7.web worker 是运行在后台的 JavaScript,不会影响页面的性能。

 

 多用于耗费CPU资源的任务。

 

开启一个worker, postmessage,主页面侦听消息,根据消息作出反应,worker 结束时,终止消息。

 

demo_workers.js:

 

 1 var i=0;
 2 
 3 function timedCount()
 4 {
 5 i=i+1;
 6 postMessage(i);
 7 setTimeout("timedCount()",500);
 8 }
 9 
10 timedCount();

 

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <p>Count numbers: <output id="result"></output></p>
 6 <button onclick="startWorker()">Start Worker</button>
 7 <button onclick="stopWorker()">Stop Worker</button>
 8 <br /><br />
 9 
10 <script>
11 var w;
12 
13 function startWorker()
14 {
15 if(typeof(Worker)!=="undefined")
16 {
17   if(typeof(w)=="undefined")
18     {
19     w=new Worker("demo_workers.js");
20     }
21   w.onmessage = function (event) {
22     document.getElementById("result").innerHTML=event.data;
23   };
24 }
25 else
26 {
27 document.getElementById("result").innerHTML="Sorry, your browser
28  does not support Web Workers...";
29 }
30 }
31 
32 function stopWorker()
33 {
34 w.terminate();
35 }
36 </script>
37 
38 </body>
39 </html>

 

 

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

  • window 对象
  • document 对象
  • parent 对象

 

 

8.Server-Sent 事件 - 单向消息传递

 

Server-Sent 事件指的是网页自动获取来自服务器的更新。

 

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知:

 
 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <h1>获得服务器更新</h1>
 5 <div id="result"></div>
 6 
 7 <script>
 8 if(typeof(EventSource)!=="undefined")
 9   {
10   var source=new EventSource("/example/html5/demo_sse.php");
11   source.onmessage=function(event)
12     {
13     document.getElementById("result").innerHTML+=event.data + "<br />";
14     };
15   }
16 else
17   {
18   document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
19   }
20 </script>
21 
22 </body>
23 </html>

 

 

 

服务器端代码实例

需要能够发送数据更新的服务器(比如 PHP 和 ASP)。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。

 

1 <?php
2 header(‘Content-Type: text/event-stream‘);
3 header(‘Cache-Control: no-cache‘);
4 
5 $time = date(‘r‘);
6 echo "data: The server time is: {$time}\n\n";
7 flush();
8 ?>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。