5.web存储
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
6. 应用程序缓存
cache manifest
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
开启一个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();
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>
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>
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} ";
7 flush();
8 ?>
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} ";
7 flush();
8 ?>