Cookie、Local storage、Session storage 的比較以及使用方法

前言

Cookie、Local Storage 和 Session Storage 是在瀏覽器中常見的三種客戶端存儲機制，這三者的使用方式、時機、特性不大相同。

之前在寫專案時多少會有需要儲存資料在瀏覽器的時候，但分不太清楚 Cookie、Local Storage 和 Session Storage 這三者的差別，因此藉由文章來記錄一下。

使用 "name=value" 格式的字串儲存
儲存空間較小，約 4KB
發送請求時都會帶上 Cookie，適合用來儲存辨識用戶用的 token 等資料
Cookie 如果沒有設定到期時間或期限，預設是會在關閉瀏覽器時失效

使用方式

// 設定 Cookie
document.cookie = "test=Hello"; // 格式: "name=value"

// 取得 Cookie
const testCookie = document.cookie.replace(
  /(?:(?:^|.*;\s*)test\s*\=\s*([^;]*).*$)|^.*$/, // test 處帶入 cookie 的 name
  "$1"
); // Hello

設定有效期限

Cookie 有兩種設定期限的方式，分別是 max-age 和 expires ，在 name=value 後面加入分號後，在分號後面就可以做設定。

max-age

max-age 會帶入以秒為單位的數值，使該 cookie 在指定的秒數後過期。如果希望在一小時後過期，就將 max-age 設置為 3600。

1
2
3


document.cookie = "test=Hello; max-age=3600";

expires

expires 會帶入 GMT 格式的時間字串，如果希望 cookie 在一小時後過期，可以先取得當前時間利用 getTime() 取得毫秒格式，接著加上要多少毫秒後到期再轉回 GMT 格式，最後再使用 toUTCString() 方法轉換為字串就可以存到 Cookie 了。

const expireDate = new Date(); // 取得當前時間
expireDate.setTime(expireDate.getTime() + (1 * 60 * 60 * 1000)); // 加上一小時的 GMT 時間

const expires = expireDate.toUTCString(); // 將 date 物件轉為字串

document.cookie = `test=Hello; expires=${expires}`;

Local storage、Session storage

以 Key 和 Value 的格式儲存，這兩者皆為字串
相較於 Cookie 有較大的儲存空間，依據瀏覽器的不同有不同的大小空間 (5~10MB) (見維基)

Local storage 與 Session storage 的差別在於：

Local storage 的資料即便關閉瀏覽器也不會消失。如果沒有手動刪除或者透過程式碼移除，就會一直儲存在瀏覽器中
Session storage 的資料當關閉瀏覽器或關閉分頁時就會清除，重整時不會消失

使用方式

Local storage 與 Session storage 具有相同的方法可以使用，以下使用 Local storage 作為例子：

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

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

// 移除單一資料
localStorage.removeItem('key');

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

Local storage 與 Session storage 儲存資料時的要注意的地方

Local storage 與 Session storage 在儲存資料時會自動以字串形式來儲存，假設儲存布林值 true 後，單純取出值的結果會是一個字串型態的 'true'。

這邊可以透過 JSON.parse() 方法進行轉換。JSON.parse() 方法會根據 JSON 字串的結構和內容來辨別資料型態，所以當取出來的字串為 'true' 時就會辨別成布林值，最後回傳布林值 true 的結果。

const data = true

localStorage.setItem('localData', data)
const getData = localStorage.getItem('localData') // string 'true'

localStorage.setItem('localData2', data)
const getData2 =  JSON.parse(localStorage.getItem('localData2')) // boolean true

另外當設定的資料為鍵值對的物件時，直接對其使用 setItem() 的話，存入的會是 [object Object] 的字串，屆時在 JSON.parse() 轉換的時候會出現語法錯誤提示 "[object Object]" is not valid JSON。

因此在一開始設定值的時候，可以利用 JSON.stringify() 的方法先轉換成字串後再存入 Local storage，陣列也是同理。

const data = { a: 1 };

const setData = JSON.stringify(data); // string '{"a":1}'
localStorage.setItem("localData", setData);

const getData = JSON.parse(localStorage.getItem("localData")); // object {a: 1}

參考資料

Document: cookie property - Web APIs | MDN
Web storage - Wikipedia
[JavaScript] Cookie、LocalStorage、SessionStorage 差異 | by Peggy Chan | Medium
What Is the Difference Between Cookie, sessionStorage and localStorage?