大家好，我是一名菜鳥工程師，Chris，今天來到第 20 天，接續昨天的資料儲存，進一步來說明 JSON 如何跟 localStorage 一起運用

JSON：全名為 JavaScript Object Notation，它是一種 JavaScript 物件的標準格式，通常用於網站上的資料呈現與傳輸，在轉換資料格式之後，能更容易解析

1 JSON 用於 Object：

每一組都是由字串 - 值組成的資料結構

• 字串必須給它引號
• 值可以設定為字串、數字、布林值、null等

{
    "name": "Chris",
    "age": 28,
    "isTeacher": false
}

2 JSON 用於 Array：

每個值可以設定為任何有效的 JSON 資料類型，如字串、數字、布林值、null等

[
    "Chris",
    28,
    false
]

3 解析 JSON.parse()：JSON 變物件

在 JavaScript 中，使用JSON.parse()，它可以接收 JSON 字串，並轉為 Javascript 物件或值

let jsonString = '{"name":"Chris","age":28}';
let jsonObj = JSON.parse(jsonString); // 轉為物件

4 生成 JSON.stringify() ：物件變 JSON 字串

在 JavaScript 中，使用JSON.stringify()，將 Javascript 物件轉為 JSON 字串，以便傳輸與儲存

let jsonString = '{"name":"Chris","age":28}';
var jsonObj = JSON.parse(jsonString); // 轉為 JSON 字串

5 在 localStorage 使用 JSON ：

將 JSON 資料儲存在瀏覽器的 localStorage，是一種常見的操作，這樣我們可以在瀏覽器中保存資料數據，並在需要時取用它，以下是使用步驟

-1 JSON 轉換為字串 : 使用JSON.stringify()

let user = {
  myName: "chris",
  email: "chris@gmail.com"
};

let userString = JSON.stringify(user);

-2 將 JSON 資料儲存在 localStorage 中 : 使用setItem()

localStorage.setItem("user", userString);

-3 從 localStorage 中檢索 JSON 資料 : 使用getItem() 和 JSON.parse()

let jsonString = localStorage.getItem("user");
let userData = JSON.parse(jsonString);

console.log(userData.myName); // 印出 "chris"
console.log(userData.email); // 印出 "chris@gmail.com"

-4 刪除 localStorage 中的 JSON 資料 : 使用removeItem()

localStorage.removeItem("user");

★★ 總結 : 以上就是 JSON 跟 localStorage 使用的說明

今天就介紹到這邊，那我們明天見囉～～

明天預計內容：JS 的 high-order function!!!