Comments: Web Storage is a very important feature introduced by HTML5. It can store data locally on the client, similar to the cookie of HTML4. However, Web Storage has more powerful functions than cookies, the cookie size is limited to 4 kb, and the Web Storage 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:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> Web Storage for HTML5 local Storage </title>
</Head>
<Body>
<Div style = "border: 2px dashed # ccc; width: 320px; text-align: center;">
<Label for = "user_name"> name: </label>
<Input type = "text" id = "user_name" name = "user_name" class = "text"/>
<Br/>
<Label for = "mobilephone"> mobile phone: </label>
<Input type = "text" id = "mobilephone" name = "mobilephone"/>
<Br/>
<Input type = "button" onclick = "save ()" value = "add record"/>
<Hr/>
<Label for = "search_phone"> enter the mobile phone number: </label>
<Input type = "text" id = "search_phone" name = "search_phone"/>
<Input type = "button" onclick = "find ()" value = ""/>
<P id = "find_result"> <br/> </p>
</Div>
<Br/>
<Div id = "list">
</Div>
</Body>
</Html>
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 = "<table border = '1'> ";
Result + = "<tr> <td> name </td> <td> mobile phone number </td> </tr> ";
For (var I = 0; I <localStorage. length; I ++ ){
Var mobilephone = localStorage. key (I );
Var name = localStorage. getItem (mobilephone );
Result + = "<tr> <td>" + name + "</td> <td>" + mobilephone + "</td> </tr> ";
}
Result + = "</table> ";
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 = "<table border = '1'> ";
Result + = "<tr> <td> name </td> <td> mobile phone </td> <td> company </td> </tr> ";
For (var I = 0; I <localStorage. length; I ++ ){
Var mobilephone = localStorage. key (I );
Var str = localStorage. getItem (mobilephone );
Var contact = JSON. parse (str );
Result + = "<tr> <td>" + contact. user_name + "</td> <td>" + contact. mobilephone + "</td> <td>" + contact. company + "</td> </tr> ";
}
Result + = "</table> ";
List. innerHTML = result;
} Else {
List. innerHTML = "the current data is empty. Please join the contact ";
}
}
The effect is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
