iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

JS 學習歷程系列 第 28

我存進去了,我又取出來了! - localStorage 基本使用 (四)

唉呀呀,就在剛剛發現昨天的舉例中,有一個小失誤:

If there's a bug, it can't possibly be in my code.(如果有 Bug,不可能是我寫的)

我的 key 值是 wife,但裡面卻存了孩子名稱:
https://ithelp.ithome.com.tw/upload/images/20190929/201199224my5NA01UG.png

  1. 為了不讓人混洧,我們先把原本存入的值給取消掉,再重新取名 key 值吧,取消其中一筆localStorage.removeItem('key 值')

let data = [
    { 'left_wifeName': 'Happy', },
    { 'right_wifeName': 'Happy2' },
];
data[0].left_childName = 'Tom';

localStorage.setItem('wife', JSON.stringify(data));

localStorage.removeItem('wife');

清潔溜溜:
https://ithelp.ithome.com.tw/upload/images/20190929/20119922hFMGRwVVeL.png

  1. 我們重新取個符合的 key 值 (叫他做 neiDetail 吧),並且再復習一遍昨天用 陣列/物件 寫入資料的方式吧:

let reData = [
    { 'left_wifeName': 'Happy', },
    { 'right_wifeName': 'Happy2' },
];
reData[0].left_childName = 'Tom';

localStorage.setItem('neiDetail', JSON.stringify(reData));
  1. 我們來試著把值取出來吧,在原本空的 HTML 上面,加入一些東西:

<p>右邊鄰居太太名<em class="rightWifeName"></em></p>
<p>左邊鄰居小孩名<em class="leftChildName"></em></p>
  1. 首先我們來試玩把一筆 key 值存一筆資料的呼叫出來的方法,方法為 localStorage.getItem('key值')

// 先來選取要放入資料的 DOM 節點
let wifeNameRight = document.querySelector('.rightWifeName');
// 再把資料放入節點中
wifeNameRight.innerHTML = localStorage.getItem('right_wifeName');

資料出來了,天呀怎麼這麼感動:
https://ithelp.ithome.com.tw/upload/images/20190929/20119922GmlG4PtcEM.png

  1. 來特別處理用 string 方式存入的資料吧:

因為一開始用了 JSON.stringify 處理存入的資料,現在要用JSON.parse()處理取出的資料,我們先來看看直接用 localStorage.getItem('neiDetail') 取值出來的長相吧:

let childNameLeft = localStorage.getItem('neiDetail');

console.log(childNameLeft);

我們可以看到 console 出來的資料都是一串字串:
https://ithelp.ithome.com.tw/upload/images/20190929/201199220G4ifc07aZ.png

我們必需把剛剛的資料轉成物件:

let childNameLeft = localStorage.getItem('neiDetail');
let childNameLeftObj = JSON.parse(childNameLeft)
console.log(childNameLeftObj);

資料成功轉型了:
https://ithelp.ithome.com.tw/upload/images/20190929/20119922WGAWBNVYyd.png

  1. 來來來~把剛剛轉型成功的資料印在我們的頁面上吧:

//選擇 DOM 節點並把資料塞入裡面吧
document.querySelector('.leftChildName').innerHTML = childNameLeftObj[0].left_childName;

呼呼呼呼,成功了耶:
https://ithelp.ithome.com.tw/upload/images/20190929/20119922NT1Iyk7RYE.png

  1. 提供扣片


上一篇
我存進去了,我又取出來了! - localStorage 基本使用 (三)
下一篇
工程師必懂英文單字 - Hoisiting (厚伊思停)
系列文
JS 學習歷程30

尚未有邦友留言

立即登入留言