透過 JSON.parse、JSON.stringify 來編譯資料

Posted on In

要編譯資料，就必須學會使用 JSON.parse 和 JSON.stringify

要學會如何：

🎃 JSON.stringify 將 array 轉為 string

🍋 當我要儲存資料到 localStorage 裡面時，如果我的資料是「JSON 或 object」的格式，都要先把資料格式轉為「string」，因為：localStorage 只會儲存「string」的資料

🎃 JSON.parse 將 string 轉為 array

🍋 從 localStorage 取出的資料，都會是「string」的格式，但是我的資料原本是一個「array」，我希望把資料變回「array」的格式（JSON 的格式），才可以去取出「陣列裡面的值」

🍅 現在有一個 array，我要把它儲存到 localStorage 裡面

JS:

1
2
3
4
5
6
7
8
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

localStorage.setItem('countyItem',county);

我用localStorage.setItem，想要把這個 array 儲存到 localStorage 裡面

😢 但是，在開發者工具中，countyItem 的 Value 竟然是[object Object]–> 這不是我要的結果

🍅 我想從 localStorage 取出這個 array 的資料

JS:

🎃 建立變數getData，用localStorage.getItem取出 array

🎃 再用console.log印出「農夫的名字」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

// 儲存資料到 localStorage 裡面
localStorage.setItem('countyItem',county);

// 從 localStorage 取出值
var getData = localStorage.getItem('countyItem');

console.log(getData[0].farmer);

😢 在開發者工具中，Console 竟然是顯示「undefined」

為什麼會這樣呢？

原因為：

localStorage 會自動把儲存的資料都轉成「string」

我用typeof(getData)來查詢，從 localStorage 裡面撈出的值，到底是什麼「型別」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

// 儲存資料到 localStorage 裡面
localStorage.setItem('countyItem',county);

// 從 localStorage 取出值
var getData = localStorage.getItem('countyItem');

console.log(typeof(getData));

因為我是把一個「array」存到 localStorage 裡面，照理來說，從 localStorage 裡面撈出的值，也應該要是「array」才對

‼️ 結果，typeof(getData)回傳的是「string」，並不是「array」

原因為：

🎃 使用 localStorage，會自動把儲存的資料都轉成「string」

🍋 所以，在 localStorage 的陣列就會用[object Object]的形式來呈現

但是，我要儲存的是一個「陣列的結構」

❓ 因為 localStorage 只能儲存「string」，我該如何把「array 轉為 string」呢？

1️⃣ 先把 array 轉為 string

JS 作法如下：

🎃 在 array 下方，先建立一個變數countyString

🎃 用JSON.stringify把「array 的資料“字串化”」

1
2
3
4
5
6
7
8
9
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

// 把 array 轉為 string
var countyString = JSON.stringify(county);

用console.log(countyString);來看看：

🎃 原本的 array 就被轉為「字串」了

2️⃣ 再儲存到 localStorage 裡面

🎃 把 array 轉為「字串」後，就可以放心的把它儲存到 localStorage 裡面了

🎃 用localStorage.setItem把countyString儲存到 localStorage 裡面

1
2
3
4
5
6
7
8
9
10
11
12
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

// 把 array 轉為 string
var countyString = JSON.stringify(county);

// 儲存資料到 localStorage 裡面
localStorage.setItem('countyItem',countyString);

😄 可以看到，在 localStorage 裡面，把我的「array 的資料」都用「字串的形式」儲存進去了

從 localStorage 取出值

現在，我想要取出剛才「存到 localStorage 裡面的資料」

❌ 錯誤寫法

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

// 把 array 轉為 string
var countyString = JSON.stringify(county);

// 儲存資料到 localStorage 裡面
localStorage.setItem('countyItem',countyString);

// 從 localStorage 取出值
var getData = localStorage.getItem('countyItem');

console.log(typeof(getData));

❌ 如果我是直接用var getData = localStorage.getItem('countyItem');來取出值，再用typeof(getData)來看「型別」

因為「county陣列」已經先被「轉為字串」後，才存到 localStorage 裡面。因此，從 localStorage 取出的值，就會是「string」

‼️ 從 localStorage 取出的值，一定都會是「string」

該如何把「string」變回「array 的格式」呢？

JS 作法如下：

1️⃣ 先將 string 轉為 array

🎃 從 localStorage 取出值後，先建立一個變數getDataAry，來把 string 轉為 array

🎃 用JSON.parse來「格式化」–> 把「string」轉為「array」

🍋 「parse」是「解析」的意思

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

// 把 array 轉為 string
var countyString = JSON.stringify(county);

// 儲存資料到 localStorage 裡面
localStorage.setItem('countyItem',countyString);

// 從 localStorage 取出值
var getData = localStorage.getItem('countyItem');

// 將 string 轉為 array
var getDataAry = JSON.parse(getData);

🎃 用console.log(typeof(getDataAry));來看看，轉為「array」之後的getDataAry會是什麼型別

✅ 在 Console 就會顯示「object」–> 也就是“物件”的格式（JSON 的格式）

2️⃣ 再從 array 撈出資料

把 string 轉為 array 後，我就可以很放心的「撈出 array 裡面的資料了」

  • 現在我想要撈出「陣列中，農夫的名字」：
    console.log(getDataAry[0].farmer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var county = [
    {
        farmer: '卡斯伯',
        chick: 90
    }
];

// 把 array 轉為 string
var countyString = JSON.stringify(county);

// 儲存資料到 localStorage 裡面
localStorage.setItem('countyItem',countyString);

// 從 localStorage 取出值
var getData = localStorage.getItem('countyItem');

// 將 string 轉為 array
var getDataAry = JSON.parse(getData);

// 從 array 撈出資料
console.log(getDataAry[0].farmer);

😄 在 Console 就會顯示「farmer 的value」了

我的 codepen 範例

https://codepen.io/saffranwang/full/wvBpvwK