昨天終於把「哈納小小記事本」做出來了。

目前已經可以：

輸入內容
↓
按新增
↓
顯示在畫面上

看起來一切都很美好。

直到我按下：

F5

啪。

全部不見。

……

不是欸。

昨天才寫好的記事，

今天一重新整理你就跟我說：

「不好意思，我們認識嗎？」

這個問題前面是不是遇過 XD

所以今天要把之前學過的 LocalStorage 正式抓回作品裡上班。

昨天的資料到底放在哪？

Day 27 是先準備一個 Array：

const notes = [];

新增記事的時候：

notes.push({
  id: Date.now(),
  text: text
});

所以資料確實有被放進：

notes

裡面。

問題是——

這個 Array 只活在目前這次網頁執行的 JavaScript 裡。

重新整理之後，

JavaScript 又重新執行：

const notes = [];

很好。

直接重新做人。

難怪什麼都沒了 ==

先把記事存進 LocalStorage

之前有學過：

localStorage.setItem()

但今天的記事不是單純一個字串，

而是一個 Array：

[
  {
    id: 123,
    text: "記得買哈納的罐罐"
  }
]

所以不能直接亂塞。

要先：

JSON.stringify()

把它轉成字串。

先寫一個 Function：

function saveNotes() {
  localStorage.setItem(
    "notes",
    JSON.stringify(notes)
  );
}

現在：

saveNotes();

就是把目前的 notes 存進 LocalStorage。

可以理解成：

記事本寫完之後，記得真的按存檔。

不然剛剛做的事情全部只存在記憶裡 XD

新增之後馬上存起來

昨天的新增功能原本是：

addBtn.addEventListener("click", function () {
  const text = noteInput.value.trim();

  if (text === "") {
    return;
  }

  notes.push({
    id: Date.now(),
    text: text
  });

  renderNotes();

  noteInput.value = "";
});

今天補上一行：

saveNotes();

變成：

addBtn.addEventListener("click", function () {
  const text = noteInput.value.trim();

  if (text === "") {
    return;
  }

  notes.push({
    id: Date.now(),
    text: text
  });

  saveNotes();
  renderNotes();

  noteInput.value = "";
});

現在每新增一篇記事，

除了更新畫面之外，

也會同步存進 LocalStorage。

很好。

這次不是只有表面有記住。

存進去了，那重新整理之後要拿回來啊

只有：

localStorage.setItem()

還不夠。

網頁重新載入時，

還要先把資料拿回來。

所以原本：

const notes = [];

可以改成：

let notes =
  JSON.parse(localStorage.getItem("notes")) || [];

這一串第一眼看起來有點：

蛤？？？

拆開來看就比較簡單。

先取得資料：

localStorage.getItem("notes")

但 LocalStorage 裡的是字串，

所以再：

JSON.parse()

把它轉回 JavaScript 的 Array。

如果原本根本沒有存過資料：

localStorage.getItem("notes")

會得到：

null

所以最後加：

|| []

意思就是：

有舊資料就用舊資料，沒有就先給我一個空陣列。

頁面一打開就把舊資料畫回來

現在資料有拿回來了，

但還有一件事情。

它只是存在：

notes

裡面。

畫面還不知道啊。

所以程式最後再加：

renderNotes();

完整流程就變成：

打開網頁
↓
讀取 LocalStorage
↓
取得 notes
↓
renderNotes()
↓
把之前的記事重新顯示出來

這次輸入：

記得買哈納的罐罐

再新增：

晚上不要熬夜

然後勇敢按下：

F5

……

還在！！！

居然還在！！！

第一次覺得重新整理之後資料沒有消失，

可以這麼感人 QQ

今天完整的 JavaScript

今天修改完後大概會變成：

const noteInput = document.querySelector("#noteInput");
const addBtn = document.querySelector("#addBtn");
const noteList = document.querySelector("#noteList");

let notes =
  JSON.parse(localStorage.getItem("notes")) || [];

function saveNotes() {
  localStorage.setItem(
    "notes",
    JSON.stringify(notes)
  );
}

function renderNotes() {
  noteList.innerHTML = "";

  notes.forEach(function (note) {
    const li = document.createElement("li");

    li.textContent = note.text;

    noteList.appendChild(li);
  });
}

addBtn.addEventListener("click", function () {
  const text = noteInput.value.trim();

  if (text === "") {
    return;
  }

  notes.push({
    id: Date.now(),
    text: text
  });

  saveNotes();
  renderNotes();

  noteInput.value = "";
});

renderNotes();

跟昨天相比，

其實主要就是多了兩件事：

新增後 → 存起來

以及：

打開網頁 → 拿回來

偷看一下 DevTools

昨天才整理過 Chrome DevTools，

今天剛好真的可以拿來用。

打開：

F12
→ Application
→ Local Storage

就可以看到：

notes

裡面真的存著剛剛輸入的資料。

昨天還只是介紹功能。

今天終於真的拿來檢查自己的作品了。

原來前面不是白學的 XD

今天的小心得

Day 27 的記事本雖然已經可以新增資料，

但重新整理之後就全部消失。

今天把 LocalStorage 接進來之後，

它才終於比較像真的「記事本」。

不然記事本最重要的功能如果是：

寫完 → 關掉 → 全忘記

那我用腦袋記可能還比較可靠 ==

而且這次不是單獨練：

localStorage.setItem()

而是真的知道：

為什麼我要用它。

新增資料後存起來，

重新進入頁面再讀回來，

最後重新 render。

前面散著學的東西，

真的開始慢慢接成一個完整流程了。

至少現在可以放心按 F5 了 XD

Day27 vs Day28

Day 28，完成！