1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 探索HTML5本地存儲功能的運用技巧

        時間:2020-11-13 10:44:32 HTML DOM 我要投稿

        探索HTML5本地存儲功能的運用技巧

          我們來實現(xiàn)一個簡單應(yīng)用,該應(yīng)用中用戶輸入用戶名和手機號,相關(guān)因襲可以保存到保存到本地,并可以進行查找、展示等基本操作。

          以下只給我出關(guān)鍵代碼,項目結(jié)構(gòu)和基本代碼以及CSS樣式大家可以自己添加。

          我們按照功能進行分布完成。

          1、存儲功能

          這里我們要完成,當(dāng)用戶輸入姓名和手機號時,自己的信息存儲到Web Storage中,html中代碼如下:

          XML/HTML Code復(fù)制內(nèi)容到剪貼板

          姓名:手機號:

          以上代碼是一個表單,用戶輸入姓名和手機號后,點擊新增記錄,即可在本地中保存姓名-手機號鍵值對。具體的js中save函數(shù)代碼如下:

          JavaScript Code復(fù)制內(nèi)容到剪貼板 functionsave(){ varmobilePhone=document.getElementById(“mobilephone”).value; varuserName=dpcument.getElementById(“username”).value; localStorage.setItem(mobilePhone,userName); }

          Save函數(shù)的邏輯很簡單,就是取出用戶輸入的值,然后利用localStorage的setItem功能以鍵值對的形式將信息存儲到Web Storage中。

          2、查找功能

          查找功能需要實現(xiàn),當(dāng)用戶輸入某個電話號碼時,顯示數(shù)據(jù)庫中對應(yīng)查找信息。HTML代碼如下:

          XML/HTML Code復(fù)制內(nèi)容到剪貼板請輸入手機號:

          其中result區(qū)域用來放置查詢的結(jié)果。下面給出js中find函數(shù)的'相關(guān)代碼:

          JavaScript Code復(fù)制內(nèi)容到剪貼板 functionfind(){ varsearch=document.getElementById(“search”).value; varname=localStorge.gteItem(search); varresult=document.getElementById(“result”); result.innerHTML=search+“:”+name; }

          先獲取用戶輸入的手機號,然后利用getItem放大從數(shù)據(jù)庫中獲取手機號為這個的用戶名,最后一同顯示在result區(qū)域中。

          以上兩個是最基本的功能,我們將會繼續(xù)探索本地存儲的高級用法,以及如何在移動應(yīng)用中自如的運用本地存儲功能。

        【探索HTML5本地存儲功能的運用技巧】相關(guān)文章:

        1.Win10存儲感知功能有什么作用-存儲感知在哪里設(shè)置

        2.演講的運用技巧

        3.CAD查詢功能的使用技巧

        4.攝影色彩的運用技巧

        5.演講手勢的運用技巧

        6.象棋馬的運用技巧

        7.開頭演講的運用技巧

        8.ps常用技巧及功能

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>