網頁瀏覽器中可以使用的 storage：localStorage 跟 sessionStorage 是什麼？兩者差異為何

在先前的文章中，我們聊過瀏覽器中的另外一個儲存空間：cookie，有興趣的讀者可以從這邊複習。

與 cookie 相比，localStorage 與 sessionStorage 的機制相對單純，兩者皆是瀏覽器中的儲存空間，與 cookie 最大的不同在於：localStorage 與 sessionStorage 只存活在瀏覽器，並不會直接挾帶在 HTTP Request Header 上，且這兩者的容量比 cookie 大上不少（cookie 為 4KB，localStorage 與 sessionStorage 為 5MB）。

接著就來看看這兩者的簡介與使用方式：

localStorage 是什麼？會在什麼場合派上用場？

localStorage 的運作機制很單純，主要是以鍵值對（key value pairs）的方式運作，並且在存入當下的網域生效，要注意的是 localStorage 存入的值只能是字串，舉例來說：

// 設置資料
localStorage.setItem('username', 'john_doe');

// 獲取資料
const username = localStorage.getItem('username');
console.log(username); // 輸出: john_doe

如果要存入物件的話必須要轉成字串才行：

// 假設有一個 JavaScript 物件
const user = {
  id: 1,
  username: 'john_doe',
  email: 'john@example.com',
};

// 使用 JSON.stringify 將物件轉換為 JSON 字串
const userString = JSON.stringify(user);

// 將 JSON 字串存儲在 localStorage 中
localStorage.setItem('user', userString);

// 從 localStorage 中獲取 JSON 字串
const storedUserString = localStorage.getItem('user');

// 使用 JSON.parse 將 JSON 字串轉換為 JavaScript 物件
const storedUser = JSON.parse(storedUserString);

// 此時 storedUser 將是一個包含原始物件的 JavaScript 物件
console.log(storedUser);

localStorage 並不像 cookie 一樣有許多複雜的屬性，也沒有所謂的逾期機制，除非使用者手動清了瀏覽器快取，才會使舊的 localStorage 被清掉，可說是永久性的瀏覽器儲存空間。

由於存取上只停留在瀏覽器，在資安風險上比較不容易偽造身分，但還是會有資料外洩的風險。

一般來說， localStorage 不會拿來儲存重要的資訊，如果需要進行會員資訊的識別，也會透過加密的方式、不以明碼進行儲存。

在一些需要暫存網頁服務狀態的情境中 localStorage 非常好用，例如：使用者常使用的功能快取狀態、使用者偏好的文字大小等、燈箱效果，都可以透過 localStorage 做到關掉瀏覽器後狀態依然能存續。

SessionStorage 與 LocalStorage 的差異

sessionStorage 可以看做為 localStorage 的逾期版，只要在設定後被關掉瀏覽器則會馬上失效。

sessionStorage 的逾期特性使得一次性的憑證紀錄變得更方便與安全，在少數 CMS、活動性的頁面，如果有會員機制需要被快速逾期、不想要被永久紀錄狀態，那 sessionStorage 會是比 localStorage 更好的選擇。

小結

localStorage 與 sessionStorage 是被看作比 cookie 更安全的瀏覽器端暫存機制，根據 Mozilla 這兩者也被稱為 Modern Storage API，使用上方便也彈性，應盡量避免 cookie 的使用。

以上就是瀏覽器常用的儲存空間介紹啦，如果有任何問題小跟我討論，歡迎下方留言告訴我，我是 Vivian，我們下次見！