Web Storage 是什麼
分為 Local Storage 和 Session Storage，這兩種儲存資料的方法，是為了彌補 cookie 無法大量儲存 client 端資料的問題，和 cookie 只能存取 4KB 相比，Storage 可以在每個網域中存到 5MB 的容量。而這些資料實際上被儲存在 ~/Library/Application Support/Google/Chrome/Default/Local Storage 中
- Local Storage ＆ Session Storage 比較
| Local Storage | Session Storage | |
|---|---|---|
| 生命週期 | 資料只有手動清除才會消失 | 資料在關閉瀏覽器後就會消失 |
- Cookie ＆ Web Storage 比較
| Cookie | Web Storage | |
|---|---|---|
| 儲存空間 | 4KB | 5MB |
| Server | client 和 server 都可以存取其中的資料 | 只有 client 可以存取其中的資料 |
如何在瀏覽器中查看 Web Storage 中的資料
在瀏覽器中按下滑鼠右鍵，點選「檢查」，就可以看到 Dev tools，再點選上面那欄的「Application」，就能夠看到右邊的表格，每個 key 都有其相對應的 value
實際在開發中使用 Web Storage
// 將資料儲存進 Local Storage
localStorage.setItem('key', 'value');
// 讀取 Local Storage 中的資料
localStorage.getItem('key', 'value');
// 將資料從 LocalWeb Storage 中刪除
localStorage.removeItem('key');
// 將 Local Storage 中的資料全部清除
localStorage.clear();
參考來源：