HTML5本地存儲之Web Storage應(yīng)用介紹

2024-09-05 07:20:00

字體：大中小

供稿：網(wǎng)友

Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數(shù)據(jù)，類似HTML4的cookie，但可實(shí)現(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的使用方法；我們要實(shí)現(xiàn)如下功能：
錄入聯(lián)系人，聯(lián)系人有姓名、手機(jī)號碼2個字段，以手機(jī)號作為key存入localStorage；
根據(jù)手機(jī)號碼，查找機(jī)主；
列出當(dāng)前已保存的所有聯(lián)系人信息；
首先，準(zhǔn)備一個簡單的HTML頁面，如下：

復(fù)制代碼

上一篇：css3 transform 3d 使用css3創(chuàng)建動態(tài)3d立方體(html5實(shí)踐)

下一篇：HTML5本地存儲之Database Storage應(yīng)用介紹