Web storage is a very important feature introduced by HTML5, which stores data locally on the client, similar to HTML4 cookies, but is much more powerful than cookies, and the cookie size is limited to 4kb,web Storage is officially recommended for each website 5MB.
The Web storage is divided into two types:
- Sessionstorage
- Localstorage
It is clear from the literal meaning that Sessionstorage saves the data in the session and the browser shuts down, while Localstorage keeps the data on the client side;
Whether it is sessionstorage, or localstorage, can use the same API, commonly used are the following (in the case of Localstorage):
- Save data: Localstorage.setitem (Key,value);
- Read data: Localstorage.getitem (key);
- Delete individual data: Localstorage.removeitem (key);
- Delete all data: Localstorage.clear ();
- Get the Key:localStorage.key (index) of an index;
As above, both key and value must be strings, in other words, the Web Storage API can only manipulate strings.
Next, we develop a simple address book applet through the Web Storage to demonstrate the use of the relevant API, and we want to implement the following functions:
- Enter the contact person, the contact person has the name, the mobile phone number 2 fields, with the mobile phone number as the key deposit localstorage;
- Based on mobile phone number, find the main machine;
- Lists all contact information that is currently saved;
First, prepare a simple HTML page, as follows:
[HTML]View Plaincopy
- <! DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>HTML5 Local Storage Web Storage Chapter </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:</label>
- <input type="text" id="Mobilephone" name="mobilephone"/>
- <br/>
- <input type="button" onclick="Save ()" value="new record"/>
- <hr/>
- <label for="Search_phone"> enter phone number:</label>
- <input type="text" id="Search_phone" name="Search_phone"/>
- <input type="button" onclick="Find ()" value="Lookup machine master"/>
- <p id="Find_result"><br/></P>
- </div>
- <br/>
- <div id="list">
- </div>
- </body>
- </html>
The interface is displayed as follows:
To achieve a contact save, simply implement the following JS method:
[JavaScript]View Plaincopy
- Save data
- function Save () {
- var mobilephone = document.getElementById ("Mobilephone"). Value;
- var user_name = document.getElementById ("user_name"). Value;
- Localstorage.setitem (Mobilephone,user_name);
- }
To implement the lookup machine master, the following JS method is implemented:
[JavaScript]View Plaincopy
- Find data
- function Find () {
- var search_phone = document.getElementById ("Search_phone"). Value;
- var name = Localstorage.getitem (Search_phone);
- var find_result = document.getElementById ("Find_result");
- find_result.innerhtml = Search_phone + "of the Machine Master is:" + name;
- }
To show all of your saved contact information, you need to use the Localstorage.key (index) method, as follows:
[JavaScript]View Plaincopy
- Extracts all objects stored in the Localstorage and presents them to 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 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, quickly start to join the contact bar";
- }
- }
The effect is as follows:
Question: As shown on the demo, there are only 2 fields, name and mobile phone number, if you want to deposit more rich contact information, such as company name, home address, etc., how to achieve it? Can't Web storage only handle strings? At this point, the JSON stringify () method can be used to convert complex objects into strings and into Web Storage, which can be converted to JSON objects through the parse () method of JSON when read from the Web Storage.
The following simple demo adds the company attribute to the contact person to save the JS code:
[JavaScript]View Plaincopy
- 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 ();
- }
- Extracts all objects stored in the Localstorage and presents them to the interface
- function Loadall () {
- var list = document.getElementById ("list");
- if (localstorage.length>0) {
- var result = "<table border= ' 1 ' >";
- Result + = "<tr><td> name </td><td> 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, quickly start to join the contact bar";
- }
- }
The effect is as follows:
Using HTML5 to develop Android (4)---HTML5 local storage web Storage
