Web Storage是HTML5引入的一個非常重要的功能,可以在客戶端本地存儲數據,類似HTML4的cookie,但可實現功能要比cookie強大的多,cookie大小被限制在4KB,Web Storage官方建議為每個網站5MB。
Web Storage又分為兩種:
從字面意思就可以很清楚的看出來,sessionStorage將數據保存在session中,瀏覽器關閉也就沒了;而localStorage則一直將數據保存在客戶端本地;
不管是sessionStorage,還是localStorage,可使用的API都相同,常用的有如下幾個(以localStorage為例):
如上,key和value都必須為字符串,換言之,web Storage的API只能操作字符串。
接下來,我們通過Web Storage開發一個簡單的通訊錄小程序,以演示相關API的使用方法;我們要實現如下功能:
1.錄入聯繫人,聯繫人有姓名、手機號碼2個字段,以手機號作為key存入localStorage;
2.根據手機號碼,查找機主;
3.列出當前已保存的所有聯繫人信息;
首先,準備一個簡單的HTML頁面,如下:
<!DOCTYPE HTML> <html> <head> <meta charset=utf-8/> <title>HTML5本地存儲之Web Storage篇</title> </head> <body> <div style=border: 2px dashed # ccc;width:320px;text-align:center;> <label for=user_name>姓名:</label> <input type=text id=user_name name=user_name class=text/> <br/> <label for=mobilephone >手機:</label> <input type=text id=mobilephone name=mobilephone/> <br/> <input type=button onclick=save() value=新增記錄/> <hr/> <label for=search_phone >輸入手機號:</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>
界面展現如下:
要實現聯繫人的保存,只需要簡單實現如下JS方法即可:
//保存數據function save(){ var mobilephone = document.getElementById(mobilephone).value; var user_name = document.getElementById(user_name).value; localStorage.setItem(mobilephone,user_name); }要實現查找機主,則實現如下JS方法:
//查找數據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 + 的機主是: + name; }要展現所有已保存的聯繫人信息,則需要使用localStorage.key(index)方法,如下:
//將所有存儲在localStorage中的對象提取出來,並展現到界面上function loadAll(){ var list = document.getElementById(list); if(localStorage.length>0){ var result = <table border=' 1'>; result += <tr><td>姓名</td><td>手機號碼</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 = 目前數據為空,趕緊開始加入聯繫人吧; } }效果如下:
問題:如上的演示,都只有2個字段,姓名和手機號碼,如果要存入更為豐富的聯繫人信息,比如公司名稱、家庭地址等,如何實現呢? Web Storage不是只能處理字符串嗎?此時,可以利用JSON的stringify()方法,將復雜對象轉變成字符串,存入Web Storage中;當從Web Storage中讀取時,可以通過JSON的parse()方法再轉換成JSON對象;
如下簡單演示增加了公司屬性的聯繫人保存JS代碼:
//保存數據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(); } //將所有存儲在localStorage中的對象提取出來,並展現到界面上function loadAll (){ var list = document.getElementById(list); if(localStorage.length>0){ var result = <table border='1'>; result += <tr><td>姓名</td><td >手機</td><td>公司</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 = 目前數據為空,趕緊開始加入聯繫人吧; } }效果如下:
以上所述是小編給大家介紹的html5本地存儲,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持!