html 09-HTML5詳解（三）

阿新 • • 發佈：2020-12-15

09-HTML5詳解（三）

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

效果如下：

如上圖所示，我們可以在 Storage 選項卡中檢視 Session Storage 和Local Storage。

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快取清單檔案。

#優勢

1、可配置需要快取的資源；

2、網路無連線應用仍可用；

3、本地讀取快取資源，提升訪問速度，增強使用者體驗；

4、減少請求，緩解伺服器負擔。

#`cache manifest`快取清單檔案

快取清單檔案中列出了瀏覽器應快取，以供離線訪問的資源。推薦使用.appcache作為字尾名，另外還要新增MIME型別。

快取清單檔案裡的內容怎樣寫：

（1）頂行寫CACHE MANIFEST。

（2）CACHE: 換行指定我們需要快取的靜態資源，如.css、image、js等。

（3）NETWORK: 換行指定需要線上訪問的資源，可使用萬用字元（也就是：不需要快取的、必須在網路下面才能訪問的資源）。

（4）FALLBACK: 換行當被快取的檔案找不到時的備用資源（當訪問不到某個資源時，自動由另外一個資源替換）。

格式舉例1：

格式舉例2：

CACHE MANIFEST

#要快取的檔案
CACHE:
    images/img1.jpg
    images/img2.jpg


#指定必須聯網才能訪問的檔案
NETWORK:
     images/img3.jpg
     images/img4.jpg


#當前頁面無法訪問是回退的頁面
FALLBACK:
    404.html

快取清單檔案怎麼用：

（1）例如我們建立一個名為demo.appcache的檔案。例如：

demo.appcache：

CACHE MANIFEST

# 註釋以#開頭
#下面是要快取的檔案
CACHE:
    http://img.smyhvae.com/2016040101.jpg

（2）在需要應用快取在頁面的根元素(html)裡，新增屬性manifest="demo.appcache"。路徑要保證正確。例如：

<!DOCTYPE html>
<html manifest="01.appcache">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
</body>
</html>