An example of HTML5 web local storage

Time:2021-3-23

Web storage is a very important function introduced by HTML5. It can store data locally on the client, similar to html4’s cookie, but its realizable function is much more powerful than cookie. The cookie size is limited to 4KB. The official recommendation of web storage is 5MB for each website.

There are two types of web storage:

sessionStorage

localStorage

It can be clearly seen from the literal meaning that session storage saves the data in session, and the browser will be closed, while local storage always saves the data in the local client;

No matter sessionstorage or localstorage, the APIs that can be used are the same. The commonly used APIs are as follows (take localstorage as an example)

Save data: localStorage.setItem (key, value); read data: localStorage.getItem (key); delete single data: localStorage.removeItem (key); delete all data: localStorage.clear (); get the key of an index: localStorage.key (index);

As mentioned above, both key and value must be strings. In other words, web storage API can only manipulate strings.

Next, we develop a simple address book applet through web storage to demonstrate the usage of related APIs. We need to realize the following functions:

Enter the contact, which has two fields: name and mobile phone number, and store the mobile phone number as the key in localstorage; search the owner according to the mobile phone number; list all the currently saved contact information;

First, write a simple HTML code

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPEHTML>    
  2. <html>    
  3. <head>    
  4. <metacharsetmetacharset=“utf-8”/>    
  5. <title>Webstorage of HTML5 local storage</title>    
  6. </head>    
  7. <body>  
  8. <divstyledivstyle=“border:2pxdashed#ccc;width:320px;text-align:center;”>  
  9. <labelforlabelfor=“user_name”>full 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=New record/>  
  16. <hr/>  
  17. <labelforlabelfor=“search_phone”>Enter mobile number:</label>  
  18. <inputtypeinputtype=”text”id=”search_phone”name=“search_phone”/>  
  19. <inputtypeinputtype=”button”onclick=”find()”value=“Find owner”/>  
  20. <pidpid=“find_result”><br/></p>  
  21. </div>  
  22. <br/>  
  23. <dividdivid=“list”>  
  24. </div>  
  25. </body>  
  26. </html>  

After writing the page, the display effect is almost as follows:

To save a contact, simply implement the following JS method:

XML/HTML CodeCopy content 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:

XML/HTML CodeCopy content to clipboard
  1. //Find 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. find_result.innerHTML=search_phone+The owner of “is” + name;
  7. }  

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

XML/HTML CodeCopy content to clipboard
  1. //All the objects stored in localstorage are extracted and displayed on the interface
  2. functionloadAll(){   
  3. varlist=document.getElementById(“list”);   
  4. if(localStorage.length>0){   
  5. varresult=“<tableborder=’1′>”;   
  6. result+=”<tr><td>full name</td><td>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=“At present, the data is empty. Start to join the contact immediately”;   
  16. }   
  17. }  

The results are as follows

Question: in the above demonstration, there are only two fields, name and mobile phone number. If you want to store more abundant contact information, such as company name, home address and so on, how can it be realized? Isn’t web storage only able to handle strings? At this time, 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 parse() method of JSON to convert them into JSON objects;

The following is a simple demonstration of adding the JS code for saving company attributes

XML/HTML CodeCopy content 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. //All the objects stored in localstorage are extracted and displayed on the interface
  12. functionloadAll(){   
  13. varlist=document.getElementById(“list”);   
  14. if(localStorage.length>0){   
  15. varresult=“<tableborder=’1′>”;   
  16. result+=”<tr><td>full 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=“At present, the data is empty. Start to join the contact immediately”;   
  27. }   
  28. }  

The results are as follows

The above is an example of HTML5 web local storage introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply you in time. Thank you very much for your support to developer!