iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
0
自我挑戰組

「 Nice to meet you , JavaScript . 」- 學習日記 系列 第 20

初探JavaScript - 透過JS setItem及getItem操作Local Storage - 應用範例

Local Storage指的是瀏覽器裡的資料庫運用技巧方式,比如像是當我們在瀏覽網站的時候,底下會出現你的最近瀏覽商品紀錄、搜尋查詢紀錄等,則是使用到localStorage的技巧將資料儲存在這個網址下,所以當電腦關機在開機後,網址下的資料仍然會被記錄著不會隨著電腦關機被清除。按右鍵檢查Application後點擊左欄Local Storage即可查看儲存KeyValue值,如下圖:
https://ithelp.ithome.com.tw/upload/images/20200920/201151063kQYaDaJJg.png

如果要清除這些Local Storage的資料,可使用JavaScript做清除,或是使用瀏覽器中清除所有資料(cookie)的功能來將Local Storage的資料清除。


  • setItem、getItem 基本操作

首先,我先在網頁開啟一個空白的html檔·案,開啟後如下,可以看到Local Storage的下片會有一個file://的網址,點進去裡面後,出現了keyValue值的欄位,不過因為是空白的html檔,所以欄位為空。
https://ithelp.ithome.com.tw/upload/images/20200920/20115106EVunFCce1y.png

若想要在keyValue欄位增加值,可使用JavaScript的localStorage.setItem(輸入key名稱, 輸入value值)來增加,範例程式碼如下:

    <script>
        var str = 'Dixie';
        localStorage.setItem('dogName', str);
    </script>

執行完成後,keyValue的欄位就會出現新增的資料:
https://ithelp.ithome.com.tw/upload/images/20200920/20115106aJTNWAGxVR.png

若是想要撈出Value的值,則可使用localStorage.getItem (輸入key名稱)即可取得相對應的value值:

        var getvalue = localStorage.getItem('dogName');
        console.log(getvalue);

執行結果:
https://ithelp.ithome.com.tw/upload/images/20200920/20115106R9al1xCbQY.png

應用範例:

    <h1>請輸入您寵物的名字</h1>
    <input type="text" class='dognameClass'>
    <br><br>
    <input type="button" class='savenameClass' value='儲存'>
    <input type="button" class='callnameClass' value='呼叫'>
    <h2>您的儲存紀錄</h2>
    <ul class='shownameClass'></ul>

    <script>
        var dogName = document.querySelector('.dognameClass');
        var savebtn = document.querySelector('.savenameClass');
        var callbtn = document.querySelector('.callnameClass');
        var showName = document.querySelector('.shownameClass');

        function saveName(e) {
            localStorage.setItem("MyDog", dogName.value);
        }
        savebtn.addEventListener('click', saveName); //點擊儲存按鈕後,Key&Value欄位會新增

        function callName(e) {
            var myDogValue = localStorage.getItem("MyDog");
            showName.innerHTML = '<li>' + myDogValue + '</li>';
        }
        callbtn.addEventListener('click', callName); //點擊呼叫按鈕後,Value值會被呼叫顯示
    </script>

setItem執行結果:
https://ithelp.ithome.com.tw/upload/images/20200920/201151061E4LT7m9RN.png

getItem執行結果:
https://ithelp.ithome.com.tw/upload/images/20200920/20115106xS3TCSKvau.png

資料參考來源:Hex School


上一篇
初探JavaScript – JS常用事件(二)
下一篇
初探JavaScript - 使用JS JSON.parse、JSON.stringify 編譯Local Storage中的資料
系列文
「 Nice to meet you , JavaScript . 」- 學習日記 30

尚未有邦友留言

立即登入留言