如何用HTML5儲存使用者輸入的資訊

我們平時進行網頁開發的時候，經常使用資料庫儲存使用者輸入的資訊。但是資料庫安裝配置比較複雜，對於一些簡單的需求並不適合。下面小編就給大家分享用HTML5快速儲存資訊的方法。

工具/材料

Sublime Text

操作方法

首先開啟Sublime Text軟體，在HTML介面中我們用HTML5語言佈局一些輸入框供使用者輸入資訊，如下圖所示

接下來我們在編寫查詢使用者輸入資訊的介面，如下圖所示，只需要一個輸入框和一個按鈕即可

然後我們在script標籤中獲取使用者輸入的資訊，並且通過localStorage物件進行本地儲存，如下圖所示

下面實現資訊查詢的功能編寫，這裡主要是通過localStorage的getItem方法進行資訊獲取的，如下圖所示

然後我們通過列表的形式將HTML5儲存的資訊都展示出來，如下圖所示

接下來我們執行頁面程式，在輸入框裡面輸入你要新增的資料，這裡簡單的輸入一些測試資料，然後點選新增記錄按鈕即可，如下圖所示

當我們新增記錄以後，就會在列表中看到我們增加的資訊了，它是以鍵值對的形式儲存的，如下圖所示

最後在查詢輸入框裡面我們輸入鍵就會得到相應的值，如下圖所示