2024-08-24 JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

發表於 分類於 閱讀次數：
2024-08-24 JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能

JavaScript 系列五：第2課 ── 學會 Local Storage 相關功能
課程目標
認識並且能使用 Local Storage 相關功能

課程內容
Local Storage 提供了前端開發者簡易的儲存功能，能夠把資料儲存在瀏覽器上

跟 cookie 不同的是，local storage 的資料不會挾帶在 http request 中發送，也就是伺服器端無法直接存取

並且 local storage 能儲存的資料大小，比 cookie 大很多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Name: <input type="text">
Age: <input type="text">
<button onclick="save()">Save</button>
if (localStorage.getItem("me")) {
  var me = JSON.parse(localStorage.getItem("me"));
  alert('hello, ' + me.name + ' (' + me.age + ')');
}

function save()
{
  var name = document.querySelectorAll('input')[0].value;

  var age = document.querySelectorAll('input')[1].value;

  var me = {
    name: name,
    age: age
  };

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

  alert('saved');
}

在這邊的範例中，使用 localStorage.setItem() 來儲存資料，使用 localStorage.getItem() 來取得資料

因為只能在 local storage 中儲存字串，所以使用 JSON.stringify 將物件轉換成字串，使用 JSON.parse 將字串轉換成物件

在 JavaScript 中，表達物件的字串格式又稱為 JSON 字串，反正就是一種格式而已，資料類型是字串

上述的程式碼，寫起來比 cookie 簡單很多，API 乾淨很多

實務上，如果儲存的資料，不需要在主機端使用，就都用 local storage 即可

關於 local storage 的 debug 除錯，也要知道一下

跟 cookie 差不多

打開瀏覽器開發者工具 -> Application -> Storage -> Local Storage 可以看到網站上有哪些資料，也可以直接在這邊修改、刪除資料

課後作業
請回頭找出你在系列課程二寫的作業

https://codelove.tw/@howtomakeaturn/course/vx8gqZ

當初的待辦事項小工具，少了一個重要功能：儲存按鈕

也就是重新整理之後，待辦事項就通通不見了

請在「匯出」按鈕旁邊，增加一個「儲存」按鈕，讓待辦事項在頁面重新整理之後，還可以繼續使用

按下按鈕之後，使用 local storage 儲存待辦事項資料，並跳出 alert 提示「儲存成功！」
頁面載入的時候，檢查 local storage，有資料的話，就復原到畫面上
做出以上功能，你就完成這次的課程目標了！

歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！

可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！

發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！

貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！

未來面試時，分享給面試官看，會讓人知道你的積極程度！