web前端學習（二）html學習筆記部分（7）--web儲存2
1.2.20 web儲存
1.2.20.1 Web儲存-客戶端儲存資料新方法
1.兩種方式
1）localStorage - 沒有時間限制的資料儲存
2）針對一個sessionStorage - 針對一個session的資料儲存
2.與cookie作對比
之前，這些都是由cookie完成的，但是cookie不適合大量資料的儲存，因為他們由每個對伺服器的請求來傳遞，這使得cookie速率很慢效率也不高。
1.2.20.2 Web儲存-localStroage
localStorage使用沒有時間限制，不論多久之後都可以繼續使用。
<body> <script> var ta; var btn; window.onload = function () { ta = document.getElementById("ta"); if (localStorage.text) { ta.value = localStorage.text; } btn = document.getElementById("btn"); btn.onclick = function () { localStorage.text= ta.value; } /* * 上面三行文字如何放在window.onload外面的話會導致出現 * Cannot set property 'onclick' of null的問題 * 會出現這樣的錯誤，是因為W3School的寫法是瀏覽器先載入完按鈕節點才執行的js， * 所以當瀏覽器自頂向下解析時，找不到onclick繫結的按鈕節點，於是報錯。 * 因此，需要把js檔案放在底部載入，就會避免該問題。或者放在window.onload中執行 * window.onload表示頁面載入完成後執行的函式，這樣JS程式碼即使放在<head>中也可以完美實現效果。 **/ } </script> <textarea name="text" id="ta" cols="30" rows="10"></textarea> <button id="btn">save</button> </body> <!--<script src="js/app.js"></script>-->
1.2.20.3 Web儲存-sessionStroage
sessionStorage方法針對一個session進行資料儲存。當用戶關閉瀏覽器視窗時session資料將被刪除
<script> var num = 0; var txt; var btn; window.onload = function(){ txt = document.getElementById("txt"); btn = document.getElementById("addbtn"); if(sessionStorage.num){ num = sessionStorage.num; showNum(); }else{ txt.innerText = 0; } btn.onclick = function(){ num++; sessionStorage.num = num; showNum(); } } function showNum(){ txt.innerHTML = num; } </script> <span id="txt"></span> <button id="addbtn">Add</button>
1.2.21 html5應用快取與web workers
1.2.21.1 應用快取與webworkers
1.什麼是web worker
web worker是執行在後臺的JavaScript，獨立於其他指令碼，不會影響頁面效能
2.方法：
postMessage() -- 它用於向HTML頁面傳回一短訊息
terminate() -- 終止web worker，並釋放瀏覽器/計算機資源
3.事件:
onmessage
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="js/index.js"></script> <body> <div id="numDiv"></div> </body> </html>
index.js
var numDiv; window.onload = function(){ numDiv = document.getElementById("numDiv"); var work = new Worker("js/count.js"); work.onmessage = function (e) { numDiv.innerHTML = e.data; } }
count.js
var countNum = 0; function count(){ postMessage(countNum); countNum++; setTimeout(count,1000); } count();
新增兩個button按鈕對其進行處理程式碼
（注意全域性變數不能再在函式中重新定義，否則會出現函式變數值不變的情況。）
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="js/index.js"></script> <body> <div id="numDiv">0</div> <button id="start">start</button> <button id="stop">stop</button> </body> </html>
index.js
var numDiv; var work = null; window.onload = function(){ numDiv = document.getElementById("numDiv"); document.getElementById("start").onclick = startWorker; document.getElementById("stop").onclick = function(){ alert(work); if(work){ alert(work); work.terminate(); work = null; } } } function startWorker(){ if(work){ return; } work = new Worker("js/count.js"); work.onmessage = function (e) { numDiv.innerHTML = e.data; } alert(work); }
count.js
var countNum = 0; function count(){ postMessage(countNum); countNum++; setTimeout(count,1000); } count();
1.2.21.2 應用快取與webworkers -- webworks
1.什麼事應用程式快取：
html5引入了應用程式快取，這意味著web應用可以進行快取，並在沒有因特網連結的時候可以進行訪問
2.應用快取的優勢：
1）離線瀏覽 -- 使用者可以在應用離線的時候使用它們
2）速度 -- 已快取資源載入地更快
3）減少伺服器負載 -- 瀏覽器只從伺服器下載更新過或更改過的資源
3.實現快取
如需啟動應用程式快取，請在文件的<html>標籤中包含manifest屬性，manifest檔案的建議的副檔名是“.appcache”
4.manifest檔案
1）CACHE MANIFEST -- 在此標題下列出的檔案將在首次下載之後進行快取
2）NETWORK -- 在此標題下列出的檔案需要與伺服器的連線，且不會被快取
3）FALLBACK -- 在此標題下列出的檔案規定當前頁面無法訪問時的回退頁面（比如404頁面）
index.html
<!DOCTYPE html> <html manifest="index.appcache" lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <script src="js/index.js"></script> </head> <body> <h1 class="h1">hello html5</h1> </body> </html>
index.appcache
CACHE MANIFEST CACHE: index.html css/style.css js/index.js
css/style.css
.h1{ background-color: aqua; }
js/index.js
空*（沒內容）
在瀏覽器關閉內容之後會在本次計算機有快取下來的內容。
在這裡出現了以下幾個問題，原因是沒有正常配置manifest檔案的原因，具體可以在以後部署伺服器的時候再詳細研究
GET http://localhost:8000/favicon.ico net::ERR_FAILED
localhost/:1 Application Cache Error event: Manifest fetch failed (6) http://localhost:8000/webWorks/index.appcache
http://localhost:8000/webWorks/