JavaScript - Storage API：初學者指南

嘿，未來的編程超新星！? 今天，我們要深入探索 JavaScript 的 Storage API。如果你從未寫過一行代碼，別擔心——我將成為你這次刺激旅程中的友好導遊。我們開始吧！

JavaScript - Storage API

Web Storage API 是什麼？

想像你有一本神奇的筆記本，即使在合上它之後，它也能記住一些事情。這就是 Web Storage API 對網站所做的！它是網頁應用程序將數據直接存儲在瀏覽器中的一種方式。

這樣想：你正在網站上玩遊戲，並想保存遊戲進度。Web Storage API 讓遊戲記住你的分數，即使你關閉瀏覽器並稍後返回，分數也會被保存。酷炫吧？

Web 存儲主要有兩種類型：

localStorage
sessionStorage

讓我們詳細探討這兩種類型。

Window localStorage 對象

localStorage 是什麼？

localStorage 就像是你網頁應用程序的持久存儲櫥櫃。即使在關閉瀏覽器後，它也會保留數據，使其成為長期存儲的理想選擇。

如何使用 localStorage

以下是如何使用 localStorage 的簡單範例：

// 存儲數據
localStorage.setItem("username", "CoolCoder123");

// 拿取數據
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // 輸出：CoolCoder123

// 移除數據
localStorage.removeItem("username");

// 清除所有數據
localStorage.clear();

在這個範例中，我們存儲了一個用戶名，擷取了它，移除了它，然後清除了所有數據。就像在你神奇的筆記本上寫東西，讀你寫的內容，擦除特定的筆記，然後把整個筆記本擦乾淨！

Window sessionStorage 對象

sessionStorage 是什麼？

sessionStorage 就像 localStorage 的健忘表親。它只為一個會話存儲數據。當你關閉瀏覽器標籤時，數據就消失了。

如何使用 sessionStorage

使用 sessionStorage 非常類似於 localStorage：

// 存儲數據
sessionStorage.setItem("tempScore", "1000");

// 拿取數據
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // 輸出：1000

// 移除數據
sessionStorage.removeItem("tempScore");

// 清除所有數據
sessionStorage.clear();

這對於存儲臨時信息非常方便，比如玩家在積極遊玩時的遊戲分數。

Cookie 與 localStorage 與 sessionStorage 的比較

現在，讓我們用一個有趣的比喻來比較這些存儲方法：

Cookies 就像便利貼。它們小，可以被伺服器讀取，並且有有效期。
localStorage 就像個人日記。它存儲大量信息，並且保存很長時間。
sessionStorage 就像白板。它暫時保存信息，當你完成時就被擦除。

這裡有一個方便的對比表：

特性	Cookies	localStorage	sessionStorage
容量	~4KB	~5MB	~5MB
過期	手動設定	永遠不會	在標籤關閉時
伺服器訪問	是	否	否
與請求一起發送	是	否	否

存儲對象屬性和方法

localStorage 和 sessionStorage 共享相同的方法和屬性。讓我們探討它們：

屬性

length：返回存儲項目的數量。

console.log(localStorage.length);

方法

setItem(key, value)：向存儲添加一個鍵/值對。
getItem(key)：檢索與給定鍵相關聯的值。
removeItem(key)：移除與給定鍵相關聯的項目。
clear()：從存儲中移除所有項目。
key(index)：返回指定索引處的鍵名。

以下是一個使用所有這些方法的範例：

// 使用 setItem
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");

// 使用 getItem
console.log(localStorage.getItem("fruit")); // 輸出：apple

// 使用 key
console.log(localStorage.key(0)); // 輸出：fruit（或vegetable，順序不保證）

// 使用 length
console.log(localStorage.length); // 輸出：2

// 使用 removeItem
localStorage.removeItem("vegetable");

// 使用 clear
localStorage.clear();

這就是你在網頁存儲世界的第一步！記住，熟能生巧。嘗試創建一個簡單的網頁並實驗這些存儲方法。也許可以創建一個小遊戲，使用 localStorage 記住玩家的最高分？

在我結束之前，這裡有一個編程笑話給你：

為什麼編程師喜歡暗色模式？因為光會吸引蟲子！??

開心地編程，並記住——每個專家都曾經是初學者。持續學習，持續編程，最重要的是，玩得開心！

Credits: Image by storyset