上一篇使用localStorage保存陣列時，先透過JSON.stringify()把資料轉成文字。這次來看 JSON 到底是什麼，以及為什麼物件需要經過轉換才能保存或傳送。

JSON 的全名是 JavaScript Object Notation，是一種用文字表示資料的格式。它常用在網站和伺服器交換資料，也能用來保存結構比較完整的內容。

先準備一個 JavaScript物件：

const article = {
  id: 18,
  title: "認識 JSON",
  published: false,
  tags: ["JavaScript", "JSON"],
};

這個物件可以在 JavaScript中直接使用，例如透過article.title取得標題。不過它不是一段文字，無法直接當成一般文字傳送或存進只接受字串的localStorage。

同一份資料改成 JSON 後會長得像下面這樣：

{
  "id": 18,
  "title": "認識 JSON",
  "published": false,
  "tags": ["JavaScript", "JSON"]
}

JSON看起來很像 JavaScript物件，但兩者並不相同。JSON 是文字格式，屬性名稱和字串都必須使用雙引號。物件使用大括號，陣列使用中括號，每一筆資料用逗號隔開，屬性名稱和值之間則使用冒號。

JSON可以保存字串、數字、布林值、null、陣列和物件，但不能放入函式、undefined或註解。

要把 JavaScript物件轉成 JSON 字串，可以使用JSON.stringify()：

const jsonText = JSON.stringify(article);

console.log(jsonText);
console.log(typeof jsonText); // string

執行後，jsonText會是一段字串，因此可以拿去保存或傳送。如果想讓輸出的 JSON 比較容易閱讀，可以加入第三個參數設定縮排空格：

const formattedText = JSON.stringify(article, null, 2);
console.log(formattedText);

這裡的2代表每一層使用兩個空格縮排，只會改變文字排版，不會改變原本的資料。

從儲存空間或伺服器取得 JSON 字串後，可以使用JSON.parse()把它轉回 JavaScript資料：

const restoredArticle = JSON.parse(jsonText);

console.log(restoredArticle);
console.log(restoredArticle.title); // 認識 JSON
console.log(restoredArticle.tags[0]); // JavaScript
console.log(typeof restoredArticle); // object

jsonText是文字，不能直接使用物件的方式取得資料；經過JSON.parse()後，restoredArticle才會變回可以讀取屬性和陣列內容的 JavaScript物件。

JSON 的雙引號、逗號和括號都必須放在正確位置，格式錯誤時JSON.parse()會產生錯誤。