Explore the use of HTML5 local storage functions and html5 storage skills

Explore the use of HTML5 local storage functions and html5 storage skills

To implement a simple application, the user enters the user name and mobile phone number in the application. The attack can be saved to the local device, and basic operations such as search and display can be performed.
The following is only the key code for me. You can add the project structure, basic code, and CSS style by yourself.
The distribution is completed according to the function.

1. Storage Functions

Here we need to complete the process. When you enter your name and mobile phone number, your information is stored in Web Storage. The code in html is as follows:

Copy XML/HTML Code to clipboard

1. <Form>
2. <Labelforlabelforlabelforlabelfor = "username"> name: </label>
3. <Inputtypeinputtypeinputtypeinputtype = "text" id = "username" name = "username"/>
4. <Labelforlabelforlabelforlabelfor = "mobilephone"> mobile phone number: </label>
5. <Input type = "text" id = "lelephone" name = "mobilephone"/>
6. </Form>
7. <Input type = "button" onclick = "save ()" vale = "add record"/>
8. </Form>

The above code is a form. after entering the name and mobile phone number, you can click Add record to save the name-mobile phone number key-Value Pair locally. The specific code of the save Function in js is as follows:

Copy the content to the clipboard using JavaScript Code

1. Function save (){
2. Var mobilePhone = document. getElementById ("mobilephone"). value;
3. Var userName = dpcument. getElementById ("username"). value;
4. LocalStorage. setItem (mobilePhone, userName );
5. }

The logic of the Save function is very simple, that is, to extract the value entered by the user, and then store the information to Web Storage in the form of key-value pairs using the setItem function of localStorage.

2. Search

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

Copy XML/HTML Code to clipboard

1. <Label for = "search"> enter the mobile phone number: </label>
2. <Input type = "text" id = "search" name = "search"/>
3. <Input type = "button" onclick = "find ()" value = "">
4. <P id = "result"> <p>

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

Copy the content to the clipboard using JavaScript Code

1. Function find (){
2. Var search = document. getElementById ("search"). value;
3. Var name = localStorge. gteItem (search );
4. Var result = document. getElementById ("result ");
5. Result. innerHTML = search + ":" + name;
6. }

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

The above two are the most basic functions. We will continue to explore the advanced usage of local storage and how to use local storage in mobile apps.