阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 08月09日

LocalStorage、SessionStorage 和 Cookies：完整指南🗄️

當我們談論像資料儲存這樣的話題時，我們立刻會想到這三個概念。但問題是，我們經常在不知不覺中使用它們。

我們習慣將令牌儲存在 sessionStorage 中，但並非所有人都能回答出確切的原因。其他概念也遵循同樣的情況。所有這些問題早已由我們使用的模組決定，這很令人難過，因為即使你完全不懂網站，你也需要了解這一點。

在本文中，我嘗試為您準備終極指南，以便您不會對其用途和用途產生任何誤解。

好吧，讓我們開始吧！

圖片描述

🗄️ 本地存儲

在我們開始討論 LocalStorage 之前，值得先簡單介紹一下什麼是儲存。

簡而言之，儲存是瀏覽器儲存資訊的專用位置。在 JavaScript 中，此類儲存表示為物件，可以透過window物件的保留名稱屬性或專用變數來存取。

現在，我們回過頭來看看。我們可以透過localStorage物件存取 LocalStorage 儲存空間。現在，重要的是，即使我們關閉標籤頁或瀏覽器本身，資料也會儲存在這個物件中。這適用於處理大量資料。

// Save a value
localStorage.setItem("theme", "dark");

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

// Remove a value
localStorage.removeItem("theme");

// Clear all storage
localStorage.clear();

它是儲存長期資料（例如設定、快取資料等）的好地方。

🕓 會話存儲

SessionStorage 與 LocalStorage 類似；差異在於， localStorage僅按來源分區，而sessionStorage同時按來源和瀏覽器標籤頁（頂級瀏覽上下文）分區。 sessionStorage sessionStorage的資料僅在頁面會話期間保留。適用於大量資料。

也就是說，如果您關閉瀏覽器中的某個標籤，則此儲存體中的所有資料都會被清除。

// Save a value
sessionStorage.setItem("authToken", "123456");

// Retrieve a value
const token = sessionStorage.getItem("authToken");
console.log(token); // "123456"

const templateFn = hmpl.compile(
  `<div>
    {{#request src="/api/my-component.html"}}
      {{#indicator trigger="pending"}}
        <p>Loading...</p>
      {{/indicator}}
    {{/request}}
  </div>`
);

const content = templateFn(() => ({
  body: JSON.stringify({ token })
})).response;

// Remove a value
sessionStorage.removeItem("authToken");

// Clear all storage
sessionStorage.clear();

適用於臨時令牌，以及您在網站存取期間所需的資料，即會話資料。

🍪 餅乾

如今，最受歡迎的儲存方式，也是現代 Web 應用程式使用者最常談論的，或許就是 Cookie。 Cookie 的宣傳語層出不窮，但許多人卻忽略了一點：「它們有什麼用？」事實上，Cookie 是一種小型儲存（大小以日後為準），用於儲存臨時資料（即一段時間後會被刪除的資料）。它適用於少量資料。

// Set a cookie
document.cookie = "username=John; path=/; max-age=3600"; // expires in 1 hour

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

// Update a cookie
document.cookie = "username=Mike; path=/; max-age=3600";

// Delete a cookie
document.cookie = "username=; path=/; max-age=0";

這些資料通常用於網站上的各種追蹤。例如，有多少人點擊了，用戶如何移動遊標等等。此外，在進行身份驗證時，也常會用到這些資料。