Web Storage是HTML5引入的一個非常重要的功能,可以在客戶端本地存儲數(shù)據(jù),類似HTML4的cookie,但可實現(xiàn)功能要比cookie強(qiáng)大的多,cookie大小被限制在4KB,Web Storage官方建議為每個網(wǎng)站5MB。
Web Storage又分為兩種:
sessionStorage
localStorage
從字面意思就可以很清楚的看出來,sessionStorage將數(shù)據(jù)保存在session中,瀏覽器關(guān)閉也就沒了;而localStorage則一直將數(shù)據(jù)保存在客戶端本地;
不管是sessionStorage,還是localStorage,可使用的API都相同,常用的有如下幾個(以localStorage為例):
保存數(shù)據(jù):localStorage.setItem(key,value);讀取數(shù)據(jù):localStorage.getItem(key);刪除單個數(shù)據(jù):localStorage.removeItem(key);刪除所有數(shù)據(jù):localStorage.clear();得到某個索引的key:localStorage.key(index);如上,key和value都必須為字符串,換言之,web Storage的API只能操作字符串。
接下來,我們通過Web Storage開發(fā)一個簡單的通訊錄小程序,以演示相關(guān)API的使用方法;我們要實現(xiàn)如下功能:
錄入聯(lián)系人,聯(lián)系人有姓名、手機(jī)號碼2個字段,以手機(jī)號作為key存入localStorage;根據(jù)手機(jī)號碼,查找機(jī)主;列出當(dāng)前已保存的所有聯(lián)系人信息;首先先寫一個簡單的html代碼
新聞熱點
疑難解答