HTML5 – Web Storage
隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，越來越多的應(yīng)用需要支持離線狀態(tài)的消息提醒、數(shù)據(jù)存儲等功能。愛掏網(wǎng) - it200.comHTML5提供了一種新的localStorage和sessionStorage方法，從而解決了瀏覽器應(yīng)用離線狀態(tài)下的數(shù)據(jù)存儲問題。愛掏網(wǎng) - it200.com
localStorage和sessionStorage都是HTML5提供的Web Storage API，用于在web應(yīng)用中本地存儲數(shù)據(jù)。愛掏網(wǎng) - it200.com它們在使用方法上有著很大的相似之處，但卻有著不同的使用場景和生命周期。愛掏網(wǎng) - it200.com
localStorage
localStorage是一種長期存儲的方法，存儲數(shù)據(jù)沒有時間限制。愛掏網(wǎng) - it200.com即使瀏覽器關(guān)閉，存儲的數(shù)據(jù)仍然存在，可以用于從一個頁面到另一個頁面之間的數(shù)據(jù)傳遞。愛掏網(wǎng) - it200.com
以下是localStorage的基本使用：
//存儲數(shù)據(jù)
localStorage.setItem("username", "Haojie");
//獲取數(shù)據(jù)
var myName = localStorage.getItem("username");
console.log(myName);
//刪除數(shù)據(jù)
localStorage.removeItem("username");
sessionStorage
sessionStorage是一種短期存儲的方法，存儲的數(shù)據(jù)在瀏覽器關(guān)閉后就會清除。愛掏網(wǎng) - it200.com可以用于類似于在一個頁面中傳遞數(shù)據(jù)的情況。愛掏網(wǎng) - it200.com
以下是sessionStorage的基本使用：
//存儲數(shù)據(jù)
sessionStorage.setItem("username", "Haojie");
//獲取數(shù)據(jù)
var myName = sessionStorage.getItem("username");
console.log(myName);
//刪除數(shù)據(jù)
sessionStorage.removeItem("username");
Web Storage API方法
Web Storage API提供了以下方法，方便我們在頁面中使用localStorage和sessionStorage：
setItem(key, value)
setItem方法用于存儲數(shù)據(jù)。愛掏網(wǎng) - it200.com它接受兩個參數(shù)，第一個是key，用于標(biāo)記數(shù)據(jù)，第二個是value，即數(shù)據(jù)本身。愛掏網(wǎng) - it200.com
以下是setItem方法的使用示例：
localStorage.setItem("username", "Haojie");
getItem(key)
getItem方法用于獲取存儲的數(shù)據(jù)。愛掏網(wǎng) - it200.com它只接受一個參數(shù)key，用于標(biāo)記存儲的數(shù)據(jù)。愛掏網(wǎng) - it200.com
以下是getItem方法的使用示例：
var myName = localStorage.getItem("username");
console.log(myName);
removeItem(key)
removeItem方法用于刪除存儲的數(shù)據(jù)。愛掏網(wǎng) - it200.com它只接受一個參數(shù)key，用于標(biāo)記需要刪除的數(shù)據(jù)。愛掏網(wǎng) - it200.com
以下是removeItem方法的使用示例：
localStorage.removeItem("username");
clear()
clear方法用于刪除所有存儲的數(shù)據(jù)。愛掏網(wǎng) - it200.com它沒有任何參數(shù)。愛掏網(wǎng) - it200.com
以下是clear方法的使用示例：
localStorage.clear();
Web Storage API屬性
localStorage和sessionStorage也有著一些屬性，可以幫助我們更好的使用它們。愛掏網(wǎng) - it200.com
length
length屬性返回存儲的數(shù)據(jù)個數(shù)。愛掏網(wǎng) - it200.com
以下是length屬性的使用示例：
console.log(localStorage.length);
key(index)
key方法返回一個存儲的數(shù)據(jù)的key名稱。愛掏網(wǎng) - it200.com
以下是key方法的使用示例：
console.log(localStorage.key(0));
兼容性
Web Storage API有一些限制和兼容性問題。愛掏網(wǎng) - it200.com以下是一些需要注意的問題：
- 只有支持HTML5的瀏覽器才支持Web Storage API，不支持IE8及以下版本；
- localStorage和sessionStorage都只支持存儲字符串類型的數(shù)據(jù)，所以需要將其他數(shù)據(jù)類型轉(zhuǎn)換為字符串類型存儲；
- 存儲的數(shù)據(jù)只能存儲在當(dāng)前域名下，并不支持跨域訪問；
- 存儲的數(shù)據(jù)大小一般為5~10MB，具體取決于瀏覽器。愛掏網(wǎng) - it200.com
總結(jié)
Web Storage API提供了一種優(yōu)秀的本地存儲方法，我們可以用它來存儲一些簡單的數(shù)據(jù)，使我們的應(yīng)用程序更加穩(wěn)定、快速。愛掏網(wǎng) - it200.comlocalStorage和sessionStorage都有它們的優(yōu)點和缺點，具體使用時需要結(jié)合實際情況來選擇。愛掏網(wǎng) - it200.com