溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“HTML5網(wǎng)頁存儲(chǔ)的方法”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5網(wǎng)頁存儲(chǔ)的方法”文章吧。
一、認(rèn)識(shí)WebStorage
WebStorage是一種將少量數(shù)據(jù)存儲(chǔ)在客戶端（client）磁盤的技術(shù)。只要支持WebStorageAPI規(guī)格的瀏覽器，網(wǎng)頁設(shè)計(jì)者都可以使用JavaScript來操作它，我們先了解一下WebStorage。
WebStorage的容量由客戶端瀏覽器決定，通常1MB~5MB。
WebStorage純粹運(yùn)行客戶端，不會(huì)每次網(wǎng)頁請(qǐng)求連帶發(fā)送給服務(wù)端。
WebStorage以一組key-value對(duì)應(yīng)保存數(shù)據(jù)。
WebStorage提供兩種方式將數(shù)據(jù)保存在客戶端：一種是localStorage，一種是sessionStorage，兩者的差異在于申明周期和有效范圍。
表一WebStorage類型的差異
WebStorage類型 生命周期 有效范圍
localStorage 執(zhí)行刪除命令時(shí)才會(huì)消失 同一網(wǎng)站的網(wǎng)頁可以跨窗口和分頁
sessionStorage 瀏覽器窗口或分頁（tab）關(guān)閉就會(huì)消失 僅對(duì)當(dāng)前瀏覽器窗口或分頁有效
檢測(cè)瀏覽器是否支持WebStorage，語法如下：
if(typeof(Storage)=="undefined"){
<spanstyle="white-space:pre"></span>alert("您的瀏覽器不支持WebStorage");
}
else{
<spanstyle="white-space:pre"></span>//localStorage和sessionStorage程序代碼
}
注意：IE和Firefox測(cè)試時(shí)需要把文件上傳到服務(wù)器或者localhost才能運(yùn)行。建議測(cè)試時(shí)使用GoogleChrome瀏覽器。
二、具體學(xué)習(xí)
1、訪問localStorage
相同網(wǎng)站是指：協(xié)議、主機(jī)（domain與ip）、傳輸端口（port）都必須相同。
WebStorage只允許存儲(chǔ)字符串?dāng)?shù)據(jù)，有以下3種訪問localStorage的方法，前面的window可以不寫
Storage對(duì)象的setItem和getItem方法（key："userdata"，value："HelloWorld"）
存儲(chǔ)：window.localStorage.setItem(key,value);
讀?。簐arv=window.localStorage.getItem(key);
數(shù)組索引
存儲(chǔ)：window.localStorage[key]=value;
讀?。簐arv=window.localStorage[key];
屬性
存儲(chǔ)：window.localStorage.key=value;
讀?。簐arv=window.localStorage.key;
<spanstyle="font-size:14px;"><!DOCTYPEhtml>
<html>
<head>
<title>網(wǎng)頁存儲(chǔ)localStorage</title>
<scripttype="text/javascript">
functiononLoad(){
if(typeof(Storage)=="undefined"){
alert("Sorry！你的瀏覽器不支持WebStorage");
}
else{
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
}
}
functionsaveToLocalStorage(){
<strong>localStorage.username=inputname.value;</strong>
}
functionloadFromLocalStorage(){
<strong>show_LocalStorage.innerHTML=localStorage.username+"你好，歡迎來到我的網(wǎng)站！";</strong>
}
</script>
</head>
<bodyonload="onLoad()">
請(qǐng)輸入你的姓名：<inputtype="text"id="inputname"value=""/><br/>
<pid="show_LocalStorage"></p><br/>
<buttonid="btn_save">存儲(chǔ)到localStorage</button>
<buttonid="btn_load">從localStorage讀取數(shù)據(jù)</button>
</body>
</html></span><spanstyle="font-size:18px;">
</span>
二、刪除localStorage
要想刪除某一條localStorage數(shù)據(jù)，可以調(diào)用removeItem方法或者delete屬性進(jìn)行刪除。
window.localStorage.removeItem("userdata");
deletewindow.localStorage.userdata;
delete.window.localStorage["userdata"];
要想刪除全部的localStorage數(shù)據(jù)，可以使用clear()方法。
localStorage.clear();
<!DOCTYPEhtml>
<html>
<head>
<title>網(wǎng)頁存儲(chǔ)localStorage</title>
<scripttype="text/javascript">
functiononLoad(){
if(typeof(Storage)=="undefined"){
alert("Sorry！你的瀏覽器不支持WebStorage");
}
else{
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
btn_clear.addEventListener("click",clearLocalStorage);
}
}
functionsaveToLocalStorage(){
localStorage.username=inputname.value;
}
functionloadFromLocalStorage(){
show_LocalStorage.innerHTML=localStorage.username+"你好，歡迎來到我的網(wǎng)站！";
}
functionclearLocalStorage(){
<strong>localStorage.clear();</strong>
show_LocalStorage.innerHTML=localStorage.username;
}
</script>
</head>
<bodyonload="onLoad()">
請(qǐng)輸入你的姓名：<inputtype="text"id="inputname"value=""/><br/>
<pid="show_LocalStorage"></p><br/>
<buttonid="btn_save">存儲(chǔ)到localStorage</button>
<buttonid="btn_load">從localStorage讀取數(shù)據(jù)</button>
<buttonid="btn_clear">清除localStorage數(shù)據(jù)</button>
</body>
</html>
20d778d6ea2e72c0debf96707138b93d_Center.jpg
三、訪問sessionStorage
存儲(chǔ)
window.sessionStorage.setItem(key,value);
window.sessionStorage[key]=[value];
window.sessionStorage.key=value;
讀取
varv=window.sessionStorage.getItem(key);
varv=window.sessionStorage[key];
varv=window.sessionStorage.key;
清除
window.sessionStorage.removeItem(key);
deletewindow.sessionStorage.key;
deletewindow.sessionStorage[key];
//全部清除
sessionStorage.clear();
<spanstyle="font-size:14px;"><!DOCTYPEhtml>
<html>
<head>
<title>網(wǎng)頁存儲(chǔ)sessionStorage</title>
<scripttype="text/javascript">
functiononLoad(){
inputSpan.style.display='none';
if(typeof(Storage)=="undefined"){
alert("Sorry！你的瀏覽器不支持WebStorage");
}
else{
/*判斷姓名是否已經(jīng)存入localStorage，已存入時(shí)才執(zhí)行{}內(nèi)的命令*/
if(localStorage.username){
/*數(shù)據(jù)不存在時(shí)返回undefined*/
if(!localStorage.counter){
localStorage.counter=1;/*初始值設(shè)為1*/
}
else{
localStorage.counter++;/*遞增*/
}
btn_login.style.display='none';/*隱藏“登錄”按鈕*/
show_LocalStorage.innerHTML=localStorage.username+"你好，這是你第"+localStorage.counter+"次來到網(wǎng)站";
}
btn_login.addEventListener("click",login);
btn_send.addEventListener("click",sendok);
btn_logout.addEventListener("click",clearLocalStorage);
}
}
functionsendok(){
localStorage.username=inputname.value;
location.reload();/*重載網(wǎng)頁*/
}
functionlogin(){
inputSpan.style.display='';
}
functionclearLocalStorage(){
localStorage.clear();/*情況localStorage*/
show_LocalStorage.innerHTML="已成功注銷！";
btn_login.style.display='';/*顯示“登錄”按鈕*/
inputSpan.style.display='';/*顯示姓名輸入框和“提交”按鈕*/
}
</script>
</head>
<bodyonload="onLoad()">
<buttonid="btn_login">登錄</button>
<buttonid="btn_logout">注銷</button><br/>
<spanid="inputSpan">請(qǐng)輸入你的姓名：<inputtype="text"id="inputname"value=""/><buttonid="btn_send">提交</button></span><br/>
<pid="show_LocalStorage"></p><br/>
</body>
</html></span><spanstyle="font-weight:bold;font-size:24px;">
</span>
注：JavaScript里的運(yùn)算符“+”不僅可以數(shù)字相加還可以字符串相加。例如"123"+456="123456"
上例中l(wèi)ocalStorage.counter++;如果改成localStorage.counter=localStorage.counter+1;就會(huì)出現(xiàn)”11111......“
JavaScript將字符串轉(zhuǎn)換成為數(shù)字可以用Number()方法，localStorage.counter=Number(localStorage.counter)+1;
以上就是關(guān)于“HTML5網(wǎng)頁存儲(chǔ)的方法”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
