Html5 web本地存储实例详解

1. //保存数据     functionsave(){   
2. varcontact=newObject;    contact.user_name=document.getElementById("user_name").value;   
3. contact.mobilephone=document.getElementById("mobilephone").value;    contact.company=document.getElementById("company").value;   
4. varstr=JSON.stringify(contact);    localStorage.setItem(contact.mobilephone,str);   
5. loadAll();    }   
6. //将所有存储在localStorage中的对象提取出来，并展现到界面上    functionloadAll(){   
7. varlist=document.getElementById("list");    if(localStorage.length>0){   
8. varresult="<tableborder='1'>";    result+="<tr><td>姓名</td><td>手机</td><td>公司</td></tr>";   
9. for(vari=0;i<localStorage.length;i++){    varmobilephone=localStorage.key(i);   
10. varstr=localStorage.getItem(mobilephone);    varcontact=JSON.parse(str);   
11. result+="<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";    }   
12. result+="</table>";    list.innerHTML=result;   
13. }else{    list.innerHTML="目前数据为空，赶紧开始加入联系人吧";   
14. }    }  

效果如下：

以上所述是小编给大家介绍的Html5 web本地存储实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对易采站长站网站的支持！