• 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();
  

參考來源：

• https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f