setItem、getItem 基本操作

Posted on In

該如何「存資料到 localStorage 資料庫」呢？

先來看一下 localStorage 長什麼樣子

進入開發者工具 > 選擇 Application 頁籤

🎃 在 localStorage 下方，有一個「http://127.0.0.1:5500」

原因為：

我現在就是用「http://127.0.0.1:5500」 來讀取這一頁

🎃 選擇「http://127.0.0.1:5500」，一開始，localStorage 裡面都會是「空的」（一開始，是沒有資料的）

.setItem 存資料到 localStorage 裡面

作法如下：

🎃 建立變數str，給它一個值'tom'

🍅 .setItem小括弧內的第一個值：會帶到 localStorage 的「Key」裡面

🍅 .setItem小括弧內的第二個值：會帶到 localStorage 的「Value」裡面

JS:

1
2
var str = 'tom';
localStorage.setItem('myName',str);

🎃 回到開發者工具，可以看到：

  • myName被帶到「Key」裡面
  • tom被帶到「Value」裡面

.getItem 取出 localStorage 裡面的 Value

作法如下：

🎃 用console.log()來看“取出的值”

🍅 在.getItem小括號裡面，填入「Key」，就可以取出「localStorage 裡面的 Value」

‼️ 注意！.getItem小括號要填入的是「Key」，不是「Value」

JS:

1
2
3
4
5
var str = 'tom';
// 存資料到 localStorage 裡面
localStorage.setItem('myName',str);
// 取出 localStorage 裡面的值
console.log(localStorage.getItem('myName'));

🎃 在 Console 裡面，就撈出了「localStorage 裡面的 Value」

接下來，會分別針對「儲存資料」、「取出值」來做範例：

我的 codepen 範例

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

文字欄位的“value”，存到 localStorage 裡面

html:
🎃 文字欄位的「className 叫做.textClass」–> 會用 JavaScript 去存取它

1
2
3
<h2>請輸入你的姓名</h2>
<input type="text" class="textClass">
<input type="button" class="btnClass" value="點擊">

現在，我要做的功能是：點擊按鈕後，會撈出「文字欄位的值“value”」，再把“value”存到 localStorage 裡面

JS 作法如下：

1️⃣ 在「按鈕」綁定監聽事件.addEventListener

🎃 建立變數btn，來選取「按鈕.btnClass」

🎃 在「變數btn」綁定監聽事件.addEventListener

🍋 點擊btn，就會執行「一個 function 叫做saveName」

JS:

1
2
3
var btn = document.querySelector('.btnClass');

btn.addEventListener('click',saveName,false);

2️⃣ 撈出「文字欄位的value」

在function saveName(e){}裡面：

🎃 建立變數str，來記錄「當下，文字欄位的value」

🍋 用.value取出「文字欄位的value」

‼️ 因為要記錄的是「“點擊”當下，文字欄位的value」，因此「變數str」要寫在function saveName(e){}裡面

❌ 因為「文字欄位本身沒有填寫value屬性」，因此，如果把「變數str」寫在function saveName(e){}外面，就會抓到「空值」

JS:

1
2
3
4
5
6
7
var btn = document.querySelector('.btnClass');

function saveName(e){
    var str = document.querySelector('.textClass').value;
}

btn.addEventListener('click',saveName,false);

3️⃣ 把value存到 localStorage 裡面

🎃 用.setItem把value存到 localStorage 裡面

JS:

1
2
3
4
5
6
7
8
var btn = document.querySelector('.btnClass');

function saveName(e){
    var str = document.querySelector('.textClass').value;
    localStorage.setItem('myName',str);
}

btn.addEventListener('click',saveName,false);

寫完 JS 程式碼了！

在文字欄位輸入「ruta」後，按下「點擊」

用開發者工具 Application 看：

🍋 Key 帶入了myName

🍋 Value 帶入了ruta

取出 localStorage 裡面的 Value

html:

🎃 新增一個按鈕 class="btnCall"

1
2
3
4
<h2>請輸入你的姓名</h2>
<input type="text" class="textClass">
<input type="button" class="btnClass" value="點擊">
<input type="button" class="btnCall" value="點擊呼叫名字">

現在，我要做的功能是：點擊「點擊呼叫名字」按鈕後，會跳出 alert 顯示「儲存在 localStorage 裡面的 Value」

JS 作法如下：

1️⃣ 在「按鈕」綁定監聽事件.addEventListener

  • 建立變數call，來選取.btnCall：
    var call = document.querySelector('.btnCall');

在「按鈕」綁定監聽事件.addEventListener

🎃 點擊.btnCall，就會執行 function

JS:

1
2
// 取出 localStorage 裡面的 Value
call.addEventListener('click',function(e){},false);

2️⃣ 取出「localStorage 裡面的 Value」

🎃 在 function 裡面，建立變數str，用.getItem取出「localStorage 裡面的 Value」

‼️ 雖然在前一個 function 已經有把變數取名叫str了，但是因為在 function 裡面的是「區域變數」–> 在 function 執行完後，「區域變數」就會被銷毀，因此在另一個 function 還是可以把變數取名叫做str

🎃 再用 alert 顯示出「localStorage 裡面的 Value」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var btn = document.querySelector('.btnClass');
var call = document.querySelector('.btnCall');

// 存資料到 localStorage 裡面
function saveName(e){
    var str = document.querySelector('.textClass').value;
    localStorage.setItem('myName',str);
}

btn.addEventListener('click',saveName,false);

// 取出 localStorage 裡面的 Value
call.addEventListener('click',function(e){
    var str = localStorage.getItem('myName');
    alert('你的名字叫做 ' + str);
},false);

寫完 JS 程式碼了！

在文字欄位輸入「harry」後，

🍋 按下「點擊」

用開發者工具 Application 看：Value 帶入了harry

🍋 按下「點擊呼叫名字」跳出 alert 顯示「你的名字叫做 harry」