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

Source: Internet
Author: User
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:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.