如何用HTML5存儲用戶輸入的資訊
我們平時進行網頁開發的時候,經常使用數據庫存儲用戶輸入的資訊。但是數據庫安裝配置比較複雜,對於一些簡單的需求並不適合。下面小編就給大家分享用HTML5快速存儲資訊的方法。
工具/材料
Sublime Text
操作方法
首先開啟Sublime Text軟件,在HTML介面中我們用HTML5語言佈局一些輸入框供用戶輸入資訊,如下圖所示
接下來我們在編寫查找用戶輸入資訊的介面,如下圖所示,只需要一個輸入框和一個按鈕即可
然後我們在script標籤中獲取用戶輸入的資訊,並且透過localStorage對象進行本地存儲,如下圖所示
下面實現資訊查找的功能編寫,這裏主要是透過localStorage的getItem方法進行資訊獲取的,如下圖所示
然後我們透過列表的形式將HTML5存儲的資訊都展示出來,如下圖所示
接下來我們執行頁面程序,在輸入框裏面輸入你要添加的數據,這裏簡單的輸入一些測試數據,然後點擊新增記錄按鈕即可,如下圖所示
當我們新增記錄以後,就會在列表中看到我們增加的資訊了,它是以鍵值對的形式存儲的,如下圖所示
最後在查找輸入框裏面我們輸入鍵就會得到相應的值,如下圖所示