Explore the tips for using HTML5 local storage function

This article mainly introduces the application skills of HTML5 local storage function. Through examples, you can deepen your understanding of HTML5 local storage and apply it skillfully. Interested friends can refer to it.

Let’s implement a simple application. In this application, the user enters the user name and mobile phone number, and the relevant routines can be saved locally, and basic operations such as search and display can be performed.

Only the key code is given to me below. You can add the project structure, basic code and CSS style by yourself.

We complete the distribution according to functions.

1. Storage function

Here we have to complete. When the user enters their name and mobile phone number, their information is stored in Web Storage. The code in the html is as follows:

<form>     
     <labelforlabelforlabelforlabelfor=”username”>姓名：</label>     
     <inputtypeinputtypeinputtypeinputtype=”text” id=”username” name=”username” />     
     <labelforlabelforlabelforlabelfor=”mobilephone”>手机号：</label>     
     <input type=”text” id=”mobilephone”name=”mobilephone” />        
     <input type=”button” onclick=”save()”vale=”新增记录” />     
</form>

The above code is a form. After the user enters the name and mobile phone number, click Add Record to save the name-mobile phone number key-value pair locally. The specific save function code in js 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 very simple, which is to take out the value entered by the user, and then use the setItem function of localStorage to store the information in the form of key-value pairs in Web Storage middle.

2. Search function

The search function needs to be implemented. When the user enters a phone number, the corresponding search information in the database is displayed. The HTML code is as follows:

<label for=”search”>请输入手机号：</label>     
<input type=”text" id=”search”name=”search” />     
<input type=”button” onclick=”find()”value=”查找”>     
<p id=”result”><p>

The result area is used to place the query results. The following is the relevant code for the find function in js:

function find(){     
     var search =document.getElementById(“search”).value;     
     var name = localStorge.gteItem(search);     
     var result =document.getElementById(“result”);     
     result.innerHTML= search + “:” + name;     
}

First obtain the mobile phone number entered by the user, then use getItem to zoom in to obtain the user name with this mobile phone number from the database, and finally display it together in the result area middle.

The above two are the most basic functions. We will continue to explore the advanced usage of local storage and how to freely use the local storage function in mobile applications. For more related tutorials, please visit Html5 Video Tutorial!