如何用HTML5存储用户输入的信息
生活随笔
收集整理的這篇文章主要介紹了
如何用HTML5存储用户输入的信息
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
我們平時(shí)進(jìn)行網(wǎng)頁(yè)開發(fā)的時(shí)候,經(jīng)常使用數(shù)據(jù)庫(kù)存儲(chǔ)用戶輸入的信息。但是數(shù)據(jù)庫(kù)安裝配置比較復(fù)雜,對(duì)于一些簡(jiǎn)單的需求并不適合。下面就給大家分享用HTML5快速存儲(chǔ)信息的方法。 工具/材料 Sublime Text 操作方法 01 首先打開Sublime Text軟件,在HTML界面中我們用HTML5語(yǔ)言布局一些輸入框供用戶輸入信息,如下圖所示 02 接下來我們?cè)诰帉懖檎矣脩糨斎胄畔⒌慕缑?,如下圖所示,只需要一個(gè)輸入框和一個(gè)按鈕即可 03 然后我們?cè)趕cript標(biāo)簽中獲取用戶輸入的信息,并且通過localStorage對(duì)象進(jìn)行本地存儲(chǔ),如下圖所示 04 下面實(shí)現(xiàn)信息查找的功能編寫,這里主要是通過localStorage的getItem方法進(jìn)行信息獲取的,如下圖所示 05 然后我們通過列表的形式將HTML5存儲(chǔ)的信息都展示出來,如下圖所示 06 接下來我們運(yùn)行頁(yè)面程序,在輸入框里面輸入你要添加的數(shù)據(jù),這里簡(jiǎn)單的輸入一些測(cè)試數(shù)據(jù),然后點(diǎn)擊新增記錄按鈕即可,如下圖所示 07 當(dāng)我們新增記錄以后,就會(huì)在列表中看到我們?cè)黾拥男畔⒘?,它是以鍵值對(duì)的形式存儲(chǔ)的,如下圖所示 08 最后在查找輸入框里面我們輸入鍵就會(huì)得到相應(yīng)的值,如下圖所示
總結(jié)
以上是生活随笔為你收集整理的如何用HTML5存储用户输入的信息的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 多囊卵巢综合症到医院挂什么科
- 下一篇: 《送兄弟回雪夜》第四句是什么