【前端】【H5 API】Web儲存 Web Storage
Web儲存
傳統的方式是使用document.cookie來進行儲存，但是由於其儲存空間有限（大約4KB），並且需要複雜的操作來解析，給開發者帶來了諸多不便。
為此，HTML 5規範提出了網路儲存的相關解決的方案，即Web Storage（Web儲存）和本地資料庫Web SQL Database。
Web Storage API
關鍵物件
-
window.sessionStorage物件用於區域儲存； -
window.localStorage物件用於本地儲存。
特點
- 資料的設定和讀取比較方便。
- 容量較大，
sessionStorage大約為5MB，localStorage大約為20MB。 - 只能儲存字串，若想要儲存JSON物件，則可以使用
window.JSON.stringify()或者parse()進行序列化和反序列化編碼
優勢
- 減少網路流量的使用。
- 使用Web Storage，一旦資料儲存在本地後，就可以避免再次向伺服器請求資料。因此減少了不必要的資料請求，同時也減少了資料在瀏覽器和伺服器間不必要地來回傳遞。
- 能夠快速顯示資料。
- 使用Web Storage效能好，因為從本地讀資料比通過網路從伺服器獲得資料速度要快很多，可以即時獲得本地資料。再加上網頁本身也可以有快取，因此如果整個頁面和資料都在本地，則可以立即顯示。
- 可以臨時儲存資料
在很多時候，資料只需要在使用者瀏覽一組頁面期間使用，而關閉視窗後資料就可以丟棄。這種情況使用sessionStorage非常方便。
方法屬性
由於
sessionStroage物件和localStorage物件都是Storage的例項，所以都可以使用Storage介面提供的方法和屬性。Web Storage介面中提供了一些方法和屬性，如表所示。
| 方法/屬性 | 描述 |
|---|---|
| key(n) | 該方法用於返回儲存物件中第n個key的名稱 |
| setItem(key, value) | 該方法接收一個鍵名和值作為引數，將會把鍵值對新增到儲存中，如果鍵名存在，則更新其對應的值 |
| getItem(key) | 該方法接收一個鍵名作為引數，返回鍵名對應的值 |
| removeItem(key) | 該方法刪除鍵名為key的儲存內容 |
| clear() | 該方法清空所有儲存內容 |
| length | 該屬性返回Storage儲存物件中包含的item的數量 |
sessionStorage
sessionStorage主要用於區域儲存，區域儲存是指資料只在單個頁面的會話期內有效。session就是會話的意思，比如現實生活中，打電話時從拿起話筒撥號到結束通話電話之間的一系列過程可以稱為一次會話。在Web開發中，一次會話是指一個瀏覽器視窗從開啟到關閉的過程。如果關閉瀏覽器，那麼會話就將結束。sessionStorage的資料是儲存在瀏覽器的記憶體中的。當瀏覽器關閉後，記憶體將被自動清除。
sessionStorage中儲存的資料只在當前瀏覽器視窗有效。如果只想將資料儲存在當前會話中，可以使用 sessionStorage 屬性。
localStorage
localStorage作為HTML5 Web Storage的API之一，主要作用是本地儲存。localStorage可以將資料按照鍵值對的方式儲存在客戶端計算機中，直到使用者或者指令碼主動清除資料，否則該資料會一直存在。也就是說，使用了本地儲存的資料將被持久化儲存。
localStorage的優勢在於拓展了Cookie的4 KB限制，並且可以將第一次請求的資料直接儲存到本地。其容量相當於一個5 MB大小的資料庫。相比於Cookie會在每個請求頭中傳送，localStorage不會在請求頭中傳送，可以節約頻寬。
區別localStorage和sessionStorage
localStorage與sessionStorage唯一的區別就是儲存資料的生命週期不同。locaStorage 是永久性儲存，而sessionStorage的生命週期與會話保持一致，會話結束時資料消失。從硬體方面理解，localStorage的資料是儲存在硬碟中的，關閉瀏覽器時資料仍然在硬碟上，再次開啟瀏覽器仍然可以獲取。而sessionStorage的資料儲存在瀏覽器的記憶體中，當瀏覽器關閉後，記憶體將被自動清除。 localStorage在使用中也有一些侷限，具體如下。
檢查瀏覽器對該API支援情況
<script>
if (window.sessionStorage) {
// 瀏覽器支援sessionStorage
} else if (window.localStorage) {
// 瀏覽器支援localStorage
}
</script>
例項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="username">
<button id="setData">設定資料</button>
<button id="getData">獲取資料</button>
<button id="delData">刪除資料</button>
<script>
var username = document.querySelector('#username');
// 單擊“設定資料”按鈕，設定資料
document.querySelector('#setData').onclick = function () {
var val = username.value; // 獲取username裡面的值
window.sessionStorage.setItem('username', val);
};
// 單擊“獲取資料”按鈕，獲取資料
document.querySelector('#getData').onclick = function () {
alert(window.sessionStorage.getItem('username'));
};
// 單擊“刪除資料”按鈕，刪除資料
document.querySelector('#delData').onclick = function () {
window.sessionStorage.removeItem('username');
};
if (window.sessionStorage) {
// 瀏覽器支援sessionStorage
} else if (window.localStorage) {
// 瀏覽器支援localStorage
}
</script>
</script>
</body>
</html>