我們平時(shí)進(jìn)行網(wǎng)頁開發(fā)的時(shí)候，經(jīng)常使用數(shù)據(jù)庫存儲(chǔ)用戶輸入的信息。但是數(shù)據(jù)庫安裝配置比較復(fù)雜，對于一些簡單的需求并不適合。下面小編就給大家分享用HTML5快速存儲(chǔ)信息的方法。

工具/材料

Sublime Text

操作方法

• 01

  首先打開Sublime Text軟件，在HTML界面中我們用HTML5語言布局一些輸入框供用戶輸入信息，如下圖所示

  
• 02

  接下來我們在編寫查找用戶輸入信息的界面，如下圖所示，只需要一個(gè)輸入框和一個(gè)按鈕即可

  
• 03

  然后我們在script標(biāo)簽中獲取用戶輸入的信息，并且通過localStorage對象進(jìn)行本地存儲(chǔ)，如下圖所示

  
• 04

  下面實(shí)現(xiàn)信息查找的功能編寫，這里主要是通過localStorage的getItem方法進(jìn)行信息獲取的，如下圖所示

  
• 05

  然后我們通過列表的形式將HTML5存儲(chǔ)的信息都展示出來，如下圖所示

  
• 06

  接下來我們運(yùn)行頁面程序，在輸入框里面輸入你要添加的數(shù)據(jù)，這里簡單的輸入一些測試數(shù)據(jù)，然后點(diǎn)擊新增記錄按鈕即可，如下圖所示

  
• 07

  當(dāng)我們新增記錄以后，就會(huì)在列表中看到我們增加的信息了，它是以鍵值對的形式存儲(chǔ)的，如下圖所示

  
• 08

  最后在查找輸入框里面我們輸入鍵就會(huì)得到相應(yīng)的值，如下圖所示