Home > Tutorials > Html Tutorials

Detailed description of Html5 web local storage instances and html5web instances

Source: Internet
Author: User
Tags sessionstorage
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Detailed description of Html5 web local storage instances and html5web instances

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, it 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.

There are two types of Web Storage:

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 name and mobile phone number fields, and store the mobile phone number as the key to localStorage. Find the host based on the mobile phone number and list all the currently saved contact information;

First, write a simple html code.

Copy XML/HTML Code to clipboard
  1. <! DOCTYPEHTML>
  2. <Html>
  3. <Head>
  4. <Metacharsetmetacharset = "UTF-8"/>
  5. <Title> WebStorage for HTML5 local storage </title>
  6. </Head>
  7. <Body>
  8. <Divstyledivstyle = "border: 2 pxdashed # ccc; width: 320px; text-align: center;">
  9. <Labelforlabelfor = "user_name"> name: </label>
  10. <Inputtypeinputtype = "text" id = "user_name" name = "user_name" class = "text"/>
  11. <Br/>
  12. <Labelforlabelfor = "mobilephone"> mobile phone: </label>
  13. <Inputtypeinputtype = "text" id = "mobilephone" name = "mobilephone"/>
  14. <Br/>
  15. <Inputtypeinputtype = "button" onclick = "save ()" value = "add record"/>
  16. <Hr/>
  17. <Labelforlabelfor = "search_phone"> enter the mobile phone number: </label>
  18. <Inputtypeinputtype = "text" id = "search_phone" name = "search_phone"/>
  19. <Inputtypeinputtype = "button" onclick = "find ()" value = ""/>
  20. <Pidpid = "find_result"> <br/> </p>
  21. </Div>
  22. <Br/>
  23. <Dividdivid = "list">
  24. </Div>
  25. </Body>
  26. </Html>

After the page is written, the display effect is similar:

To save contacts, simply implement the following JS method:

Copy XML/HTML Code to clipboard
  1. Functionsave (){
  2. Varmobilephone = document. getElementById ("mobilephone"). value;
  3. Varuser_name = document. getElementById ("user_name"). value;
  4. LocalStorage. setItem (mobilephone, user_name );
  5. } // Used to save data

To find the host, implement the following JS method:

Copy XML/HTML Code to clipboard
  1. // Search for Data
  2. Functionfind (){
  3. Varsearch_phone = document. getElementById ("search_phone"). value;
  4. Varname = localStorage. getItem (search_phone );
  5. Varfind_result = document. getElementById ("find_result ");
  6. The host for find_result.innerHTML = search_phone + "is:" + name;
  7. }

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

Copy XML/HTML Code to clipboard
  1. // Extract all objects stored in localStorage and display them on the Interface
  2. FunctionloadAll (){
  3. Varlist = document. getElementById ("list ");
  4. If (localStorage. length> 0 ){
  5. Varresult = "<tableborder = '1'> ";
  6. Result + = "<tr> <td> name </td> <td> mobile phone number </td> </tr> ";
  7. For (vari = 0; I <localStorage. length; I ++ ){
  8. Varmobilephone = localStorage. key (I );
  9. Varname = localStorage. getItem (mobilephone );
  10. Result + = "<tr> <td>" + name + "</td> <td>" + mobilephone + "</td> </tr> ";
  11. }
  12. Result + = "</table> ";
  13. List. innerHTML = result;
  14. } Else {
  15. List. innerHTML = "the current data is empty. Please join the contact ";
  16. }
  17. }

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 contact with the company property to save the JS Code:

Copy XML/HTML Code to clipboard
  1. // Save data
  2. Functionsave (){
  3. Varcontact = newObject;
  4. Contact. user_name = document. getElementById ("user_name"). value;
  5. Contact. mobilephone = document. getElementById ("mobilephone"). value;
  6. Contact. company = document. getElementById ("company"). value;
  7. Varstr = JSON. stringify (contact );
  8. LocalStorage. setItem (contact. mobilephone, str );
  9. LoadAll ();
  10. }
  11. // Extract all objects stored in localStorage and display them on the Interface
  12. FunctionloadAll (){
  13. Varlist = document. getElementById ("list ");
  14. If (localStorage. length> 0 ){
  15. Varresult = "<tableborder = '1'> ";
  16. Result + = "<tr> <td> name </td> <td> mobile phone </td> <td> company </td> </tr> ";
  17. For (vari = 0; I <localStorage. length; I ++ ){
  18. Varmobilephone = localStorage. key (I );
  19. Varstr = localStorage. getItem (mobilephone );
  20. Varcontact = JSON. parse (str );
  21. Result + = "<tr> <td>" + contact. user_name + "</td> <td>" + contact. mobilephone + "</td> <td>" + contact. company + "</td> </tr> ";
  22. }
  23. Result + = "</table> ";
  24. List. innerHTML = result;
  25. } Else {
  26. List. innerHTML = "the current data is empty. Please join the contact ";
  27. }
  28. }

The effect is as follows:

The above is a detailed description of the Html5 web local storage instance introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
make instances of objects with constructor function aws ec2 describe instances aws rds instances spark executor instances basics of web design html5 and css3 aws dedicated instances ec2 cluster instances
Related Article
What is the META tag in HTML? Introduction to META Tag proper...
An article that allows you to read basic HTML rules and Web p...
How does HTML set the background color? HTML background color...
HTML5 new label--nav label Introduction
What are the canvases and SVG in HTML5? What is the differenc...
How do I use the HTML5 feature of the Rel property in the?

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More