iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
自我挑戰組

溫故知新 JavaScript系列 第 27

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

https://ithelp.ithome.com.tw/upload/images/20201010/20129439LhEdaph1xF.jpg
如果我們是把一個陣列存在 localStorage 內像是以下程式碼,消費紀錄是一個陣列存在資料庫內,在 LocalStorage 他的資料型態會變成字串。

// 消費記錄
 var shop =[
              {
                customer:"小美",
                price:2000
              }
          ];

//存到資料庫內
localStorage.setItem('shopItem',shop);

//取出資料發現是 undefined
var getData = localStorage.getItem('shopItem');

// 查看資料型態發現是 string
console.log(typeof(getData));

JSON.stringify

加上這個語法就可以在存到瀏覽器前,就先把資料轉成陣列存進去,這樣我們再打開 Application 內的 LocalStorage 就可以看到資料變成陣列的形式囉!

var shop =[
              {
                customer:"小美",
                price:2000
              }
          ];
          //先用變數儲存轉型後的陣列,使用 JSON.stringify
          var shop_string = JSON.stringify(shop);
          localStorage.setItem('shopItem',shop_string);

JSON.parse

那現在要把存在瀏覽器資料庫的陣列抓出來,也要透過 JSON.parse 去做轉型我們才能把資料轉成陣列來使用,這邊有個重點只要從資料庫抓資料出來一定是 string(字串) 型態,如果要把資料抓出來使用就必須轉成陣列,語法如下:

var shop =[
              {
                customer:"小美",
                price:2000
              }
          ];
          
          var shop_string = JSON.stringify(shop);
          localStorage.setItem('shopItem',shop_string);

         var getData = localStorage.getItem('shopItem');
         var getDataAry = JSON.parse(getData);
         //變成陣列型態
         console.log(typeof(getDataAry));
         //
         console.log(getDataAry[0].price);

今天就先到這邊囉,明天繼續,只剩三篇囉!


上一篇
Day26- 什麼是 localStorage
下一篇
Day28- 透過 dataset 讀取自訂資料
系列文
溫故知新 JavaScript30

尚未有邦友留言

立即登入留言