# 1. setItem、getItem 基本操作

- 開始練習前，打開你的網頁，右鍵 > Application > 左邊清單會有一個：

**storage - file://**

這是因為我的網址也有： file:// 的關係，而待會的練習都會顯示在這個網頁上暫存


---

1. 設定資料 - key:

宣告資料，並且透過 setItem

設定出 key: myName / value: tom

var str = 'tom';

// 設定 key 值：
localStorage.setItem('myName', str);


2. getItem，輕鬆撈取：

這邊就輸入前面所設定的 value 即可：

最後則會顯示： **tom**

// 撈出 key / value:  需注意，大小寫不可以錯誤，否則會讀不出來:

console.log(localStorage.getItem('myName'));

// tom

---

3. 製作主畫面來練習：


    <h1>localStorage 練習：</h1>
    <input type="text" value="請輸入您的姓名" id="inputName">
    <input type="button" value="送出">

---

4. 第一步，透過按鈕確認有無撈取 text 欄位的內容：

輸入了姓名，而 console 也成功地讀到了姓名


var el = document.querySelector('#sendName');


function inputData(e) {
    var data = document.querySelector('#inputName').value;
    console.log(data); // 透過 輸入＋click 的方式來得知有無成功
}

el.addEventListener('click', inputData, false)

---

### 如何完成範例：

1. 先分類好三個關鍵區塊:

- 輸入欄位，text - **#inputName**
- 傳送按鈕，input - **#sendName**
- 顯示TAG，show - **#showName**
---

2. 監聽事件，click 主角：

var btn = document.querySelector('#sendName');

3. 透過按下按鈕，逐步完成事件：

// 按鈕產生事件：

var btn = document.querySelector('#sendName');

function sendData(e) {
    // 宣告 str 為撈取 text欄位內所輸入的值（內容）
    var str = document.querySelector('#inputName').value;

    // 設定 localStorage 屬性 - key / value:
    localStorage.setItem('myName', str);

    // 此 console.log 訊息為輔助設計，非必要：
    console.log('您儲存了' + str);

    // 綁定 em show，使 show 產生文字為 localstorage - getItem:
    var show = document.querySelector('#showName');
    show.textContent = localStorage.getItem('myName');
}

btn.addEventListener('click', sendData, false)

###### tags: `JavaScript - localStorage`