HTML5 学习笔记（二）

浏览数：28 / 时间：2015年06月09日

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 ?>

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

HTML5 学习笔记（二）