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