這篇文章主要介紹了HTML5中本地存儲(chǔ)功能怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為遂川企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、做網(wǎng)站，遂川網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

我們來實(shí)現(xiàn)一個(gè)簡單應(yīng)用，該應(yīng)用中用戶輸入用戶名和手機(jī)號(hào)，相關(guān)因襲可以保存到保存到本地，并可以進(jìn)行查找、展示等基本操作。
以下只給我出關(guān)鍵代碼，項(xiàng)目結(jié)構(gòu)和基本代碼以及CSS樣式大家可以自己添加。
我們按照功能進(jìn)行分布完成。

1、存儲(chǔ)功能

這里我們要完成，當(dāng)用戶輸入姓名和手機(jī)號(hào)時(shí)，自己的信息存儲(chǔ)到Web Storage中，html中代碼如下：

     
     姓名：     
          
     手機(jī)號(hào)：     
     
            
            

以上代碼是一個(gè)表單，用戶輸入姓名和手機(jī)號(hào)后，點(diǎn)擊新增記錄，即可在本地中保存姓名-手機(jī)號(hào)鍵值對(duì)。具體的js中save函數(shù)代碼如下：

function save(){     
     var mobilePhone= document.getElementById(“mobilephone”).value;     
     var userName= dpcument.getElementById(“username”).value;     
localStorage.setItem(mobilePhone,userName);     
}

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

2、查找功能

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

請(qǐng)輸入手機(jī)號(hào)：     
          
          
     

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

function find(){     
     var search =document.getElementById(“search”).value;     
     var name = localStorge.gteItem(search);     
     var result =document.getElementById(“result”);     
     result.innerHTML= search + “:” + name;     
}

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中本地存儲(chǔ)功能怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

文章名稱：HTML5中本地存儲(chǔ)功能怎么用-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/cedsph.html