JS學習筆記#11 | 瀏覽器儲存資料的方法

undefined on Tenor

1. Cookie

• 用途：
• • 用於儲存用戶資訊（例如：登入狀態、偏好設定）。
  • 可傳送到伺服器端，支援跨域使用。
• 特性：
• • 容量限制：約 4 KB。
  • 與每次 HTTP 請求一起傳送，增加流量負擔。
  • 支援設置有效期（Expires 或 Max-Age）。
• 操作方式：
• • 設定 Cookie：

document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/"; 

• • 取得 Cookie：

 console.log(document.cookie); // username=John

2. LocalStorage

• 用途：
• • 用於儲存長期資料，例如：主題設定、應用設定等。
  • 僅能在瀏覽器端使用。
• 特性：
• • 容量限制：約 5-10 MB（依瀏覽器而定）。
  • 使用 key / value pair 的方式 給值或取值
  • 資料持久化，除非手動清除，否則不會過期。
• 操作方式：
• • 設定資料：

localStorage.setItem("theme", "dark"); 

• • 取得資料：

const theme = localStorage.getItem("theme"); 
console.log(theme); // dark 

• • 刪除資料：

localStorage.removeItem("theme"); 

• • 清空所有資料：

localStorage.clear();

3. SessionStorage

• 用途：
• • 用於儲存臨時資料，例如：當前頁面的輸入數據、會話狀態等。
  • 僅能在瀏覽器端使用。
• 特性：
• • 容量限制：約 5 MB。
  • 使用 key / value pair 的方式 給值或取值
  • 資料只存在於當前瀏覽器的單一分頁中，關閉分頁或瀏覽器後資料即會被清除。
• 操作方式：
• • 設定資料：

sessionStorage.setItem("key", "value");

• • 取得資料：

const value = sessionStorage.getItem("key"); 
console.log(value); // value

• • 刪除資料：

sessionStorage.removeItem("key");

• • 清空所有資料：

sessionStorage.clear();