Explore HTML5 Local Storage function tips (1)

Through the example, we can deepen the understanding of HTML5 local storage, and can be used skillfully.

We implement a simple application, the user input user name and mobile phone number, the relevant inherited can be saved to the local, and can be found, display and other basic operations.

Just give me the key code, project structure and basic code, and CSS styles that you can add yourself.

We do the distribution according to the function.

1. Storage function

Here we are going to finish, when the user enters the name and phone number, their own information is stored in the Web Storage, the code in the HTML is as follows:

<form>     <labelfor= "username" > name:</label>     <inputtype= "text" id= "username" name= " Username "/>     <labelfor=" mobilephone "> Phone number: </label><input type=" text "id=" Mobilephone "Name=" Mobilephone "/>       </form>       <input type=" button "onclick=" Save () "vale=" New Record "/></form>

The above code is a form, the user entered the name and phone number, click on the new record, you can save the name in the local-phone number key value pairs. The specific JS in the Save function code is as follows:

function Save () {     var mobilephone= document.getelementbyid ("Mobilephone"). Value;     var username= dpcument.getelementbyid ("UserName"). Value;localstorage.setitem (Mobilephone,username);}

The logic of the Save function is simply to take out the values entered by the user, and then use the SetItem function of Localstorage to store the information in the Web Storage in the form of key-value pairs.

2. Search function

The Find feature needs to be implemented when the user enters a phone number, displaying the corresponding lookup information in the database. The HTML code is as follows:

<label for= "Search" > Please enter phone number:</label>       <input type= "text" id= "search" name= "search"/>       < Input type= "button" onclick= "Find ()" value= "Lookup" >       <p id= "Result" ><p>

Where the result area is used to place the results of the query. The code for the Find function in JS is given below:

function Find () {     var search =document.getelementbyid ("search"). Value;     var name = Localstorge.gteitem (search);     var result =document.getelementbyid ("result");     Result.innerhtml= search + ":" + Name;}

First get the phone number entered by the user, and then use GetItem to enlarge from the database to get the phone number of the user name, and finally displayed in the result area.

The above two is the most basic feature, we will continue to explore the advanced usage of local storage, and how to use the local storage capabilities in mobile applications.

Explore HTML5 Local Storage function tips (1)