昨天還在研究事件冒泡，

今天想做一個超簡單的小功能：

按一下按鈕，把哈納的名字記住。

看起來沒問題。

結果我重新整理頁面。

……

沒了。

再重新整理一次。

……

還是沒了。

不是欸，我才按 F5，你怎麼就失憶了？？？ ==

所以今天來看看：

LocalStorage

到底能不能幫我把資料留下來。

先來一個最簡單的例子

HTML：

<input id="nameInput" type="text" placeholder="輸入名字">

<button id="saveBtn">
  儲存
</button>

<p id="result"></p>

JavaScript：

const nameInput = document.querySelector("#nameInput");
const saveBtn = document.querySelector("#saveBtn");
const result = document.querySelector("#result");

saveBtn.addEventListener("click", function () {
  result.textContent = nameInput.value;
});

現在輸入：

哈納

按下儲存。

畫面就會出現：

哈納

很好。

看起來非常成功。

然後我手賤按了一下重新整理。

啪。

哈納不見了。

哈納：

蛤？我又被你弄丟了是不是？？？

LocalStorage：這次真的幫我記住！

如果希望資料重新整理之後還存在，

就可以使用：

localStorage.setItem("catName", "哈納");

其中：

"catName"

可以想成這筆資料的名字，也就是 key。

而：

"哈納"

就是要存進去的 value。

所以：

localStorage.setItem("catName", "哈納");

可以先簡單理解成：

幫我開一個叫 catName 的抽屜，然後把「哈納」塞進去。

這次應該不會失憶了吧 ==

把輸入的名字真的存起來

把剛剛的程式改一下：

saveBtn.addEventListener("click", function () {
  const name = nameInput.value;

  localStorage.setItem("catName", name);

  result.textContent = name;
});

現在輸入：

哈納

按下儲存。

接著重新整理頁面。

雖然畫面上的文字還是會消失，

但資料其實已經存在 LocalStorage 裡了。

所以接下來要把它拿回來。

getItem：哈納，出來！

要取得剛剛存好的資料，可以使用：

const savedName = localStorage.getItem("catName");

接著：

result.textContent = savedName;

完整一點：

const savedName = localStorage.getItem("catName");

if (savedName) {
  result.textContent = savedName;
}

這樣重新整理頁面後，

之前存的：

哈納

就會再次出現在畫面上。

欸！！！

這次真的記得了！！！

哈納終於不用每按一次 F5 就重新投胎一次 XD

不想記了怎麼辦？

如果今天想刪掉某一筆資料，可以使用：

localStorage.removeItem("catName");

這樣 catName 這筆資料就會被移除。

如果想全部清掉：

localStorage.clear();

這個就比較狠。

整間倉庫直接清空。

所以沒事不要亂按 XD

今天先記這三個

存資料：

localStorage.setItem("catName", "哈納");

拿資料：

localStorage.getItem("catName");

刪資料：

localStorage.removeItem("catName");

簡單來說就是：

setItem    → 放進去
getItem    → 拿出來
removeItem → 丟掉

很好。

終於有一個我可以直接照字面理解的東西了 QQ

但 LocalStorage 不是什麼都能直接塞

LocalStorage 儲存的值是字串。

如果今天想存比較複雜的資料：

const cat = {
  name: "哈納",
  age: 5
};

通常會先轉成 JSON 字串：

localStorage.setItem(
  "cat",
  JSON.stringify(cat)
);

拿出來時再轉回物件：

const savedCat = JSON.parse(
  localStorage.getItem("cat")
);

第一次看到：

JSON.stringify()
JSON.parse()

真的很像：

存進去前先壓扁，拿出來再還原 XD

今天先知道有這件事就好。

不要一次把自己搞太忙。

今天的小心得

今天最大的發現就是：

平常直接存在 JavaScript 變數裡的資料，

頁面重新載入之後不會自動幫我保留下來。

如果只是一些簡單、非敏感，而且希望重新整理後還能保存的瀏覽器端資料，

LocalStorage 就滿方便的。

不過像密碼、Token 或其他敏感資訊，

就不是看到 LocalStorage 很方便就全部往裡面塞。

不然方便是方便了，

資安同事可能會先來找我聊天 XD

好啦。

今天成功治好網頁的短期失憶。

哈納重新整理之後終於還記得自己叫哈納了。

Day 21，完成！