HTML5網(wǎng)頁存儲的方法

這篇“HTML5網(wǎng)頁存儲的方法”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5網(wǎng)頁存儲的方法”文章吧。

創(chuàng)新互聯(lián)主營靖江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App制作,靖江h(huán)5微信小程序搭建,靖江網(wǎng)站營銷推廣歡迎靖江等地區(qū)企業(yè)咨詢

一、認(rèn)識WebStorage

WebStorage是一種將少量數(shù)據(jù)存儲在客戶端（client）磁盤的技術(shù)。只要支持WebStorageAPI規(guī)格的瀏覽器，網(wǎng)頁設(shè)計者都可以使用JavaScript來操作它，我們先了解一下WebStorage。

WebStorage的容量由客戶端瀏覽器決定，通常1MB~5MB。

WebStorage純粹運行客戶端，不會每次網(wǎng)頁請求連帶發(fā)送給服務(wù)端。

WebStorage以一組key-value對應(yīng)保存數(shù)據(jù)。

WebStorage提供兩種方式將數(shù)據(jù)保存在客戶端：一種是localStorage，一種是sessionStorage，兩者的差異在于申明周期和有效范圍。

表一WebStorage類型的差異

WebStorage類型生命周期有效范圍

localStorage 執(zhí)行刪除命令時才會消失同一網(wǎng)站的網(wǎng)頁可以跨窗口和分頁

sessionStorage 瀏覽器窗口或分頁（tab）關(guān)閉就會消失僅對當(dāng)前瀏覽器窗口或分頁有效

檢測瀏覽器是否支持WebStorage，語法如下：

if(typeof(Storage)=="undefined"){

<spanstyle="white-space:pre"></span>alert("您的瀏覽器不支持WebStorage");

}

else{

<spanstyle="white-space:pre"></span>//localStorage和sessionStorage程序代碼

}

注意：IE和Firefox測試時需要把文件上傳到服務(wù)器或者localhost才能運行。建議測試時使用GoogleChrome瀏覽器。

二、具體學(xué)習(xí)

1、訪問localStorage

相同網(wǎng)站是指：協(xié)議、主機（domain與ip）、傳輸端口（port）都必須相同。

WebStorage只允許存儲字符串?dāng)?shù)據(jù)，有以下3種訪問localStorage的方法，前面的window可以不寫

Storage對象的setItem和getItem方法（key："userdata"，value："HelloWorld"）

存儲：window.localStorage.setItem(key,value);

讀取：varv=window.localStorage.getItem(key);

數(shù)組索引

存儲：window.localStorage[key]=value;

讀?。簐arv=window.localStorage[key];

屬性

存儲：window.localStorage.key=value;

讀?。簐arv=window.localStorage.key;

<spanstyle="font-size:14px;"><!DOCTYPEhtml>

<html>

<head>

<title>網(wǎng)頁存儲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()">

請輸入你的姓名：<inputtype="text"id="inputname"value=""/><br/>

<pid="show_LocalStorage"></p><br/>

<buttonid="btn_save">存儲到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)頁存儲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()">

請輸入你的姓名：<inputtype="text"id="inputname"value=""/><br/>

<pid="show_LocalStorage"></p><br/>

<buttonid="btn_save">存儲到localStorage</button>

<buttonid="btn_load">從localStorage讀取數(shù)據(jù)</button>

<buttonid="btn_clear">清除localStorage數(shù)據(jù)</button>

</body>

</html>

20d778d6ea2e72c0debf96707138b93d_Center.jpg

三、訪問sessionStorage

存儲

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)頁存儲sessionStorage</title>

<scripttype="text/javascript">

functiononLoad(){

inputSpan.style.display='none';

if(typeof(Storage)=="undefined"){

alert("Sorry！你的瀏覽器不支持WebStorage");

}

else{

/*判斷姓名是否已經(jīng)存入localStorage，已存入時才執(zhí)行{}內(nèi)的命令*/

if(localStorage.username){

/*數(shù)據(jù)不存在時返回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">請輸入你的姓名：<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里的運算符“+”不僅可以數(shù)字相加還可以字符串相加。例如"123"+456="123456"

上例中l(wèi)ocalStorage.counter++;如果改成localStorage.counter=localStorage.counter+1;就會出現(xiàn)”11111......“

JavaScript將字符串轉(zhuǎn)換成為數(shù)字可以用Number()方法，localStorage.counter=Number(localStorage.counter)+1;

HTML5網(wǎng)頁存儲的方法

以上就是關(guān)于“HTML5網(wǎng)頁存儲的方法”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：HTML5網(wǎng)頁存儲的方法
文章來源：http://bm7419.com/article46/pcgceg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、App設(shè)計、手機網(wǎng)站建設(shè)、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容