Day15 - Web Storage

上一篇介紹了 Cookie，Cookie 雖然方便，但只能存放 4KB 的資料，除了 Cookie，還有其他的方法可以讓資料存在本地端嗎？

答案是可以的！透過 HTML5 所提供的 Web Storage，我們可以在本地端儲存更多的資料。

Web Storage

Web Storage 可分為兩種：Local Storage 和 Session Storage

Local Storage

1. 沒有過期時間，除非手動刪除，不然資料會一直在
2. 儲存容量比 Cookie 大，約為 5MB 左右
3. 只能在同源的頁面中存取，符合同源政策
4. 只能儲存字串

Session Storage

1. 頁面關閉時資料就會消失
2. 儲存容量比 Cookie 大，約為 5MB 左右
3. 只能在同一個分頁中存取
4. 只能儲存字串

Local Storage 使用方式

// 設置資料
localStorage.setItem('key', 'value');

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

// 刪除特定資料
localStorage.removeItem('key');

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

Session Storage 使用方式

// 設置資料
sessionStorage.setItem('key', 'value');

// 取得資料
sessionStorage.getItem('key');

// 刪除特定資料
sessionStorage.removeItem('key');

// 清除所有資料
sessionStorage.clear();

比較表