SessionStorage與LocalStorage的用法詳解

一、SessionStorage和LocalStorage簡介

SessionStorage和LocalStorage都是HTML5提供的Web Storage API，用於將數據存儲在客戶端（瀏覽器）中，而不是像Cookies那樣將數據存放在服務器端。它們在瀏覽器中以鍵值對(key-value pairs)的形式存儲數據，能夠存儲大量數據，並且可以跨瀏覽器窗口保持數據。

SessionStorage中存儲的數據只在當前會話中保留，當用戶關閉瀏覽器標籤頁或刷新頁面時，SessionStorage中的數據就會被清空。而LocalStorage中存儲的數據會一直保留在客戶端中，即使用戶關閉瀏覽器窗口或者重啟電腦，LocalStorage中的數據仍然不會被刪除。

二、使用SessionStorage

1. 設置和獲取SessionStorage里的數據

// 設置SessionStorage數據
sessionStorage.setItem("key", "value");

// 獲取SessionStorage數據
var value = sessionStorage.getItem("key");

在SessionStorage中設置數據使用setItem()方法，該方法接受兩個參數，第一個參數為鍵名，第二個參數為鍵值。獲取SessionStorage里的數據使用getItem()方法，該方法接受一個參數，即鍵名，返回鍵值。

2. 刪除SessionStorage中的數據

// 刪除SessionStorage中的數據
sessionStorage.removeItem("key");

使用removeItem()方法，傳入要刪除數據的鍵名即可刪除SessionStorage中的數據。

3. 清空SessionStorage中的所有數據

// 清空SessionStorage中的所有數據
sessionStorage.clear();

使用clear()方法即可清空SessionStorage中的所有數據。

三、使用LocalStorage

1. 設置和獲取LocalStorage里的數據

// 設置LocalStorage數據
localStorage.setItem("key", "value");

// 獲取LocalStorage數據
var value = localStorage.getItem("key");

在LocalStorage中設置數據使用setItem()方法，該方法接受兩個參數，第一個參數為鍵名，第二個參數為鍵值。獲取LocalStorage里的數據使用getItem()方法，該方法接受一個參數，即鍵名，返回鍵值。

2. 刪除LocalStorage中的數據

// 刪除LocalStorage中的數據
localStorage.removeItem("key");

使用removeItem()方法，傳入要刪除數據的鍵名即可刪除LocalStorage中的數據。

3. 清空LocalStorage中的所有數據

// 清空LocalStorage中的所有數據
localStorage.clear();

使用clear()方法即可清空LocalStorage中的所有數據。

四、SessionStorage和LocalStorage的應用場景

1. 記住用戶的個人信息

當用戶在登錄後，需要記住用戶名和密碼等個人信息，以便下次訪問網站時自動填充表單。使用LocalStorage存儲這些個人信息可以防止用戶每次都需要輸入信息，提高用戶體驗。

2. 放置表單的臨時數據

在填寫表單時，如果用戶需要離開當前頁面或者關閉瀏覽器標籤頁，可以使用SessionStorage存儲用戶填寫的表單數據，在用戶回來時自動恢復已經填寫好的表單數據，不需要重新填寫。

3. 記錄用戶訪問頁面的狀態

在用戶訪問網站時，記錄用戶瀏覽過的頁面，並且將這些信息存儲在LocalStorage中。這樣網站就可以根據用戶的瀏覽行為進行優化，提高用戶體驗。