Web Storage 允許在瀏覽器保存用戶數據，具體分爲兩種，一種是 localStorage，一種是 sessionStorage
對於客戶端的存儲方式，類似的還有早期乃至現在還廣泛使用的 cookie，它們之間的區別如下：
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 與服務端的通信 | 在每次請求中都會攜帶 | 不與服務端通信 | 不與服務端通信 |
| 數據的生命週期 | 設置的失效時間前有效 | 永久有效，除非主動刪除 | 在瀏覽器關閉前有效 |
| 數據的作用範圍 | 設置的域名及其子域名 | 在所有同源窗口之間共享 | 不能在不同窗口之間共享 |
| 儲存的數據大小 | 一般不超過 4KB | 一般在 5MB 左右 | 一般在 5MB 左右 |
Web Storage API 繼承 window 對象，並提供兩個新屬性，window.localStorage 和 window.sessionStorage
它們都是一個對象，常見的屬性和方法如下：
length：保存的數據條數setItem(key, value)：保存數據getItem(key)：獲取指定數據removeItem(ket)：刪除指定數據clear()：刪除所有數據key(index)：根據索引獲取鍵名
if (window.localStorage) {
var storage = window.localStorage
storage.setItem('username', 'admin')
storage.setItem('password', '12345')
let username = storage.getItem('username')
let password = storage.getItem('password')
console.log(username) // admin
console.log(password) // 12345
console.log(storage.length) // 2
storage.removeItem('password')
console.log(storage.length) // 1
storage.clear()
}
最後順便來補充一下 cookie 和 session 的相關知識
我們知道，HTTP 協議是無狀態的，也就是說每次發出的請求都是獨立的，這個時候就會造成很多的不便
比如，用戶在一個請求中登陸之後，對於他發出的另外一個請求，服務器還是無法識別用戶的身份
而 cookie 和 session 的出現都是爲了記錄用戶的信息，從而在多次請求中識別用戶的身份
cookie 的運作機制如下：
- 服務器在響應中通過
set-cookie頭部要求瀏覽器設置 cookie - 瀏覽器在收到響應後，如果該瀏覽器支持使用 cookie，那麼就會將 cookie 保存到文件
- 瀏覽器在以後每次發出請求時，都會在請求中通過
cookie頭部帶上 cookie 信息 - 服務器在收到請求後，根據 cookie 信息識別用戶身份
session 的運作機制如下：
-
服務器創建一個唯一的標識，並將這個標識和對應的 session 信息保存下來，然後將這個標識發給瀏覽器
保存 session 信息的方式常見的有三種，一種是保存在內存中，一種是保存在文件中，一種是保存在數據庫中
-
瀏覽器在收到這個標識後，在以後每次發出請求時，都會帶上這個標識
帶上標識的方式常見的有兩種，一種是附加在 cookie 中，一種是附加在 URL 參數中
-
服務器在收到請求後，根據標識找到對應的 session 信息識別用戶身份
cookie 數據存放在瀏覽器上，session 數據存放在服務器上，所以相對而言使用 session 更爲安全
但是，過多的 session 數據保存在服務器上，會影響服務器的性能，所以需要權衡選擇
【 閱讀更多 HTML 系列文章，請看 HTML學習筆記 】