Introduction to the WebStorage application of HTML5 local storage _ html5 tutorial skills-

WebStorage is a very important feature introduced by html5. it can store data locally on the client, similar to the cookie of HTML4. However, WebStorage has more powerful functions than cookies, the cookie size is limited to 4 kb. WebStorage officially recommends 5 MB for each website. If you are interested, you can understand that Web Storage is a very important feature introduced by HTML5, data can be stored locally on the client, similar to the HTML4 cookie, but its functions are much more powerful than cookies. The cookie size is limited to 4 kb, and the Web Storage official recommendation is 5 MB for each website.
Web Storage is divided into two types::
SessionStorage
LocalStorage
It can be clearly indicated from the literal meaning that sessionStorage saves the data in the session, and the browser closes, while localStorage keeps saving the data locally on the client;
The APIs available for both sessionStorage and localStorage are the same. Common APIs are as follows (using localStorage as an example ):
Save data: localStorage. setItem (key, value );
Read data: localStorage. getItem (key );
Delete a single data: localStorage. removeItem (key );
Delete all data: localStorage. clear ();
Obtain the key of an index: localStorage. key (index );
As shown above, both the key and value must be strings. In other words, the web Storage API can only operate strings.
Next, we will develop a simple address book applet through Web Storage to demonstrate how to use related APIs. We will implement the following functions:
Enter the contact. The contact has two fields: Name and mobile phone number, and the mobile phone number is saved to localStorage as the key;
Find the host based on the mobile phone number;
Lists all currently saved contact information;
First, prepare a simple HTML page, as shown below::

The Code is as follows:

Web Storage for HTML5 Local Storage

Name:



Mobile phone:

Enter the mobile phone number:

The interface is shown as follows::

To save contacts, simply implement the following JS method:

The Code is as follows:

// Save data
Function save (){
Var mobilephone = document. getElementById ("mobilephone"). value;
Var user_name = document. getElementById ("user_name"). value;
LocalStorage. setItem (mobilephone, user_name );
}

To find the host, implement the following JS method::

The Code is as follows:

// Search for Data
Function find (){
Var search_phone = document. getElementById ("search_phone"). value;
Var name = localStorage. getItem (search_phone );
Var find_result = document. getElementById ("find_result ");
The host for find_result.innerHTML = search_phone + "is:" + name;
}

To display all the saved contact information, use the localStorage. key (index) method as follows:

The Code is as follows:

// Extract all objects stored in localStorage and display them on the Interface
Function loadAll (){
Var list = document. getElementById ("list ");
If (localStorage. length> 0 ){
Var result ="

";Result + =" ";For (var I = 0; IVar mobilephone = localStorage. key (I );Var name = localStorage. getItem (mobilephone );Result + =" ";}Result + ="

Name	Mobile phone number
"+ Name +"	"+ Mobilephone +"

";
List. innerHTML = result;
} Else {
List. innerHTML = "the current data is empty. Please join the contact ";
}
}

The effect is as follows:

Q: In the above demo, there are only two fields, name and mobile phone number. If you want to store more contact information, such as the company name and home address, how can this problem be achieved? Isn't Web Storage only capable of processing strings? In this case, you can use the stringify () method of JSON to convert complex objects into strings and store them in Web Storage. when reading from Web Storage, you can use the JSON parse () the method is then converted to a JSON object;
The following is a simple demonstration of adding a company property contact to save JS Code.:

The Code is as follows:

// Save data
Function save (){
Var contact = new Object;
Contact. user_name = document. getElementById ("user_name"). value;
Contact. mobilephone = document. getElementById ("mobilephone"). value;
Contact. company = document. getElementById ("company"). value;
Var str = JSON. stringify (contact );
LocalStorage. setItem (contact. mobilephone, str );
LoadAll ();
}
// Extract all objects stored in localStorage and display them on the Interface
Function loadAll (){
Var list = document. getElementById ("list ");
If (localStorage. length> 0 ){
Var result ="

";Result + =" ";For (var I = 0; IVar mobilephone = localStorage. key (I );Var str = localStorage. getItem (mobilephone );Var contact = JSON. parse (str );Result + =" ";}Result + ="

Name	Mobile phone	Company
"+ Contact. user_name +"	"+ Contact. mobilephone +"	"+ Contact. company +"

";
List. innerHTML = result;
} Else {
List. innerHTML = "the current data is empty. Please join the contact ";
}
}

The effect is as follows: