前端學習(5)~html詳解(三)
- 2020 年 2 月 23 日
- 筆記
Web 存儲
隨著互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由於其存儲大小只有4k左右，並且解析也相當的複雜，給開發帶來諸多不便，HTML5規範則提出解決方案。
H5 中有兩種存儲的方式
1、window.sessionStorage 會話存儲：
- 保存在記憶體中。
- 生命周期為關閉瀏覽器窗口。也就是說，當窗口關閉時數據銷毀。
- 在同一個窗口下數據可以共享。
2、window.localStorage 本地存儲：
- 有可能保存在瀏覽器記憶體里，有可能在硬碟里。
- 永久生效，除非手動刪除（比如清理垃圾的時候）。
- 可以多窗口共享。
Web 存儲的特性
（1）設置、讀取方便。
（2）容量較大，sessionStorage 約5M、localStorage 約20M。
（3）只能存儲字元串，可以將對象 JSON.stringify() 編碼後存儲。
常見 API
設置存儲內容：
setItem(key, value);
PS：可以新增一個 item，也可以更新一個 item。
讀取存儲內容：
getItem(key);
根據鍵，刪除存儲內容：
removeItem(key);
清空所有存儲內容：
clear();
根據索引值來獲取存儲內容：
key(n);
sessionStorage 的 API 舉例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <button>sesssionStorage存儲</button> <button>sesssionStorage獲取</button> <button>sesssionStorage更新</button> <button>sesssionStorage刪除</button> <button>sesssionStorage清除</button> <script> //在h5中提供兩種web存儲方式 // sessionStorage session（會話，會議） 5M 當窗口關閉是數據銷毀 記憶體 // localStorage 20M 永久生效 ，除非手動刪除 清理垃圾 硬碟上 var txt = document.querySelector('input'); var btns = document.querySelectorAll('button'); // sessionStorage存儲數據 btns[0].onclick = function () { window.sessionStorage.setItem('userName', txt.value); window.sessionStorage.setItem('pwd', '123456'); window.sessionStorage.setItem('age', 18); } // sessionStorage獲取數據 btns[1].onclick = function () { txt.value = window.sessionStorage.getItem('userName'); } // sessionStorage更新數據 btns[2].onclick = function () { window.sessionStorage.setItem('userName', txt.value); } // sessionStorage刪除數據 btns[3].onclick = function () { window.sessionStorage.removeItem('userName'); } // sessionStorage清空數據 btns[4].onclick = function () { window.sessionStorage.clear(); } </script> </body> </html>
localStorage 的 API 舉例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <button>localStorage存儲</button> <button>localStorage獲取</button> <button>localStorage更新</button> <button>localStorage刪除</button> <button>localStorage清除</button> <script> /* * localStorage * 數據存在硬碟上 * 永久生效 * 20M * */ var txt = document.querySelector('input'); var btns = document.querySelectorAll('button'); // localStorage存儲數據 btns[0].onclick = function () { window.localStorage.setItem('userName', txt.value); } // localStorage存儲數據 btns[1].onclick = function () { txt.value = window.localStorage.getItem('userName'); } // localStorage刪除數據 btns[3].onclick = function () { window.localStorage.removeItem('userName'); } </script> </body> </html>
案例：記住用戶名和密碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <label for=""> 用戶名：<input type="text" class="userName"/> </label> <br/><br/> <label for=""> 密 碼：<input type="text" class="pwd"/> </label> <br/><br/> <label for=""> <input type="checkbox" class="check" id=""/>記住密碼 </label> <br/><br/> <button>登錄</button> <script> var userName = document.querySelector('.userName'); var pwd = document.querySelector('.pwd'); var chk = document.querySelector('.check'); var btn = document.querySelector('button'); // 當點擊登錄的時候 如果勾選「記住密碼」，就存儲密碼；否則就清除密碼 btn.onclick = function () { if (chk.checked) { // 記住數據 window.localStorage.setItem('userName', userName.value); window.localStorage.setItem('pwd', pwd.value); } else { // 清除數據 window.localStorage.removeItem('userName'); window.localStorage.removeItem('pwd'); } } // 下次登錄時，如果記錄的有數據，就直接填充 window.onload = function () { userName.value = window.localStorage.getItem('userName'); pwd.value = window.localStorage.getItem('pwd'); } </script> </body> </html>
網路狀態
我們可以通過 window.onLine 來檢測用戶當前的網路狀況，返回一個布爾值。另外：
- window.online：用戶網路連接時被調用。
- window.offline：用戶網路斷開時被調用（拔掉網線或者禁用乙太網）。
網路狀態監聽的程式碼舉例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> window.addEventListener('online', function () { alert('網路連接建立！'); }); window.addEventListener('offline', function () { alert('網路連接斷開！'); }) </script> </body> </html>
應用快取
使用 HTML5，通過創建 cache manifest 文件，可以輕鬆地創建 web 應用的離線版本。
HTML5 引入了應用程式快取，這意味著 web 應用可進行快取，並可在沒有網際網路連接時進行訪問。
應用程式快取為應用帶來三個優勢：
- 離線瀏覽 – 用戶可在應用離線時使用它們
- 速度 – 已快取資源載入得更快
- 減少伺服器負載 – 瀏覽器將只從伺服器下載更新過或更改過的資源。
下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
Cache Manifest 基礎
如需啟用應用程式快取，請在文檔的 <html> 標籤中包含 manifest 屬性：
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
每個指定了 manifest 的頁面在用戶對其訪問時都會被快取。如果未指定 manifest 屬性，則頁面不會被快取（除非在 manifest 文件中直接指定了該頁面）。
manifest 文件的建議的文件擴展名是：".appcache"。
請注意，manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 伺服器上進行配置。
Manifest 文件
manifest 文件是簡單的文本文件，它告知瀏覽器被快取的內容（以及不快取的內容）。
manifest 文件可分為三個部分：
- CACHE MANIFEST – 在此標題下列出的文件將在首次下載後進行快取
- NETWORK – 在此標題下列出的文件需要與伺服器的連接，且不會被快取
- FALLBACK – 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST /theme.css /logo.gif /main.js
上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 影像，以及一個 JavaScript 文件。當 manifest 文件載入後，瀏覽器會從網站的根目錄下載這三個文件。然後，無論用戶何時與網際網路斷開連接，這些資源依然是可用的。
NETWORK
下面的 NETWORK 小節規定文件 "login.asp" 永遠不會被快取，且離線時是不可用的：
NETWORK: login.asp
可以使用星號來指示所有其他資源/文件都需要網際網路連接：
NETWORK: *
FALLBACK
下面的 FALLBACK 小節規定如果無法建立網際網路連接，則用 "offline.html" 替代 /html5/ 目錄中的所有文件：
FALLBACK: /html5/ /404.html
注釋：第一個 URI 是資源，第二個是替補。
更新快取
一旦應用被快取，它就會保持快取直到發生下列情況：
- 用戶清空瀏覽器快取
- manifest 文件被修改（參閱下面的提示）
- 由程式來更新應用快取
實例 – 完整的 Manifest 文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
