不知道大家在玩前面幾天做的 Todo List 待辦事項時有沒有發現一個悲劇：
只要按一下瀏覽器的「重新整理（F5）」，剛剛辛苦輸入的所有待辦清單全部瞬間歸零！

這是因為我們之前寫的資料全都暫時存在記憶體（Memory）裡面，只要一重新整理，網頁重新載入，變數就被重設了。

如果我們希望網頁能像真正的小 App 一樣，關掉視窗後資料還在，該怎麼做呢？今天我們就要來介紹前端瀏覽器內建的神奇隨身碟——LocalStorage（本地儲存）！

什麼是 LocalStorage？瀏覽器的「隱形小型資料庫」

• LocalStorage 是瀏覽器提供給我們的一個超方便空間，可以讓你在使用者的電腦硬碟裡偷偷存幾 MB 的文字資料。
• 這跟 Figma 會自動把你的檔案存在雲端或本機快取、下次打開不用重畫的概念非常像。
• 它的特色非常鮮明：只要使用者不主動清除瀏覽器資料，這些東西就會永遠（或直到你刪除它為止）躺在那裡！

LocalStorage 的三大金剛指令

操作 LocalStorage 其實只需要學會這三個最核心的指令：

1. localStorage.setItem('key', 'value')（存入資料）

• 把資料存進去，需要給它一個名字（Key）跟對應的內容（Value）。
  2. localStorage.getItem('key')（取出資料）
• 透過名字（Key）把存好的內容給拿回來。

3. localStorage.removeItem('key')（刪除資料）

• 把指定的資料清除。

設計師轉前端的小陷阱：陣列與物件必須「打包」！

LocalStorage 有一個非常嚴格的脾氣：它只吃「字串（String）」！
如果你想把我們前幾天辛苦寫的陣列（Array）或物件（Object）直接塞進去，它會冷冷地吐出 [object Object] 這種看不懂的亂碼給你。
所以，在存入和取出時，我們必須請出兩個好幫手來幫忙「打包跟拆箱」：

• JSON.stringify()：把陣列或物件打包成字串，才能存進 LocalStorage。
• JSON.parse()：從 LocalStorage 拿出來後，把字串拆箱還原成原本的陣列或物件，才能用迴圈去跑它！

範例：

// 1. 假設我們有一包待辦事項陣列
const myTodos = ["學會 HTML", "搞懂 CSS Flexbox", "掌握 JS LocalStorage"];

// 【存進去】必須先用 JSON.stringify 打包成字串
localStorage.setItem('todos', JSON.stringify(myTodos));

// 【拿出來】從 LocalStorage 拿出來，並用 JSON.parse 還原成陣列
const savedTodos = JSON.parse(localStorage.getItem('todos'));

console.log(savedTodos); // 順利拿回原本的陣列格式！

今日小結

今天我們學會了用 LocalStorage 搭配 JSON 的打包與拆箱技巧，成功解決了網頁重新整理資料就消失的痛點。

至此，我們的網頁不僅有漂亮的版面、豐富的互動、能串接遠端 API、還具備了本地儲存的能力！
隨著 30 天鐵人賽進入最後倒數的第五週，明天我們要來聊聊：如何讓網頁看起來更有質感、甚至開始接觸 CSS 框架（如 Bootstrap 或 Tailwind CSS）！