網頁可以儲存使用者偏好，可以在關掉網頁後重新訪問時紀錄使用者上次瀏覽的狀態，能做到這些神奇的事是因為瀏覽器中有一個不為人知（可能只有我不知道）的儲存區域（Web Storage），讓網頁可以使用瀏覽器提供的API在使用者的電腦上儲存資料，如此一來，瀏覽器就能像人類一樣有記憶能力了。

在 HTML5 出現前，應用程式的資料是存放在 cookie 中，但因為 cookie 的儲存空間有限（上限約4KB），HTML5 之後有了 Web Storage 物件，可以儲存更多的資料量，下圖是各家瀏覽器提供的儲存空間

圖片來源：維基百科

除了儲存空間差異，Web Storage 物件還有以下幾個特點：

1. Storage 物件的特性必須是字串
2. 只能用 JavaScript 操作，伺服器無法透過 HTTP-Header 操控此物件
3. 具有相同來源的文件才能共用 Web Storage 資料，來源不同的文件就不能讀取或覆寫彼此的資料

小註解：文件的來源是由它的協定，主機名稱及通訊埠所定義。例如說： http://example.com 和 https://example.com 就不是同來源（因為協定不同）

Web Storage分成兩大類，分別是：

1. localStorage:
   • 除非手動刪除資料否則儲存的資料不會過期（關閉視窗後資料不會消失）
   • 相同來源，不同分頁的文件可以共用相同的 localStorage 資料
   • 較常使用
2. sessionStorage:
   • 瀏覽器視窗關閉後所儲存的資料會被刪除
   • 相同來源，不同分頁的文件會各自有獨立的 sessionStorage 資料
   • 較少使用

如何操作

儲存資料 setItem(key, value)

localStorage.setItem('name', 'ironman'); //存入一筆資料

取得指定key值的資料 getItem(key)

localStorage.getItem('name');  //取得資料

刪除指定key值的資料removeItem(key)

localStorage.removeItem('name'); 
localStorage.getItem('name'); // null

清除儲存區的所有資料 clear()

//存入兩筆資料
localStorage.setItem('name', 'ironman')
localStorage.setItem('age', 15)

// 清除所有資料
localStorage.clear()
localStorage.length // 0

最重要的小事

1. 因為 Storage 物件只儲存字串，當存入的值是物件時，要記得先使用 JSON.stringify() 再存入，否則瀏覽器會使用 toString() 方法轉成字串存入，反之，當從 Web Storage 取得儲存的資料時，也要記得使用JSON.parse()將字串轉回原本的型別。

2. 根據JavaScript大全，因為任何客戶端資料儲存區都不涉及加密，加上共用該裝置的使用者或是存在於該裝置上的惡意軟體都能夠存取這些資料，所以不建議使用客戶端儲存區來存放密碼，金融帳戶號碼等敏感資訊。

參考資料：

JavaScript大全
MDN
從Cookie到Storage
JAVASCRIPT.INFO