我們平時(shí)進(jìn)行網(wǎng)頁(yè)開發(fā)的時(shí)候 ， 經(jīng)常使用數(shù)據(jù)庫(kù)存儲(chǔ)用戶輸入的信息 。但是數(shù)據(jù)庫(kù)安裝配置比較復(fù)雜，對(duì)于一些簡(jiǎn)單的需求并不適合 。下面小編就給大家分享用HTML5快速存儲(chǔ)信息的方法 。
工具/材料SublimeText
操作方法【如何用HTML5存儲(chǔ)用戶輸入的信息】01、首先打開Sublime Text軟件 ， 在HTML界面中我們用HTML5語(yǔ)言布局一些輸入框供用戶輸入信息，如下圖所示
02、接下來(lái)我們?cè)诰帉懖檎矣脩糨斎胄畔⒌慕缑?，如下圖所示，只需要一個(gè)輸入框和一個(gè)按鈕即可
03、然后我們?cè)趕cript標(biāo)簽中獲取用戶輸入的信息，并且通過(guò)localStorage對(duì)象進(jìn)行本地存儲(chǔ)，如下圖所示
04、下面實(shí)現(xiàn)信息查找的功能編寫，這里主要是通過(guò)localStorage的getItem方法進(jìn)行信息獲取的，如下圖所示
05、然后我們通過(guò)列表的形式將HTML5存儲(chǔ)的信息都展示出來(lái)，如下圖所示
06、接下來(lái)我們運(yùn)行頁(yè)面程序，在輸入框里面輸入你要添加的數(shù)據(jù)，這里簡(jiǎn)單的輸入一些測(cè)試數(shù)據(jù)，然后點(diǎn)擊新增記錄按鈕即可，如下圖所示
07、當(dāng)我們新增記錄以后，就會(huì)在列表中看到我們?cè)黾拥男畔⒘?，它是以鍵值對(duì)的形式存儲(chǔ)的，如下圖所示
08、最后在查找輸入框里面我們輸入鍵就會(huì)得到相應(yīng)的值，如下圖所示
推薦閱讀
- 蘋果機(jī)如何查看iTunes備份數(shù)據(jù)中的微信聊天記錄
- 小雞吃雞王座如何使用
- 一臺(tái)功放一只音箱如何連接能達(dá)到更大聲的方法
- 如何使用藍(lán)牙音響
- 如何將重要的倒計(jì)時(shí)提醒放在手機(jī)桌面
- 2017QQ怎么設(shè)置密保問(wèn)題
- qq對(duì)話框怎么如何設(shè)置一直在最前面
- 如何區(qū)分word保存和另存為
- c4d中如何用PS皇冠路徑建皇冠模型？
- IntelliJ IDEA如何將Java代碼打成jar包發(fā)布