溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5網(wǎng)頁存儲的相關(guān)知識

發(fā)布時間：2020-04-15 14:02:51 來源：億速云 閱讀：262 作者：小新 欄目：web開發(fā)
這篇文章主要為大家詳細(xì)介紹了HTML5網(wǎng)頁存儲的相關(guān)知識，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

HTML5 網(wǎng)頁存儲 Web Storage

一、認(rèn)識Web Storage

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

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

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

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

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

表一 Web Storage類型的差異
Web Storage類型生命周期有效范圍
localStorage執(zhí)行刪除命令時才會消失同一網(wǎng)站的網(wǎng)頁可以跨窗口和分頁
sessionStorage瀏覽器窗口或分頁（tab）關(guān)閉就會消失僅對當(dāng)前瀏覽器窗口或分頁有效

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

if(typeof(Storage)=="undefined"){
<span style="white-space:pre">	</span>alert("您的瀏覽器不支持Web Storage");
}
else{
<span style="white-space:pre">	</span>//localStorage和sessionStorage程序代碼
}

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

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

1、訪問localStorage

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

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

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

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

    • 讀取：var v = window.localStorage.getItem(key);

  • 數(shù)組索引

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

    • 讀?。簐ar v = window.localStorage[key];

  • 屬性

    • 存儲：window.localStorage.key =value;

    • 讀取：var v = window.localStorage.key;

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁存儲localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的瀏覽器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
	}
}

function saveToLocalStorage(){
	<strong>localStorage.username = inputname.value;</strong>
}
function loadFromLocalStorage(){
	<strong>show_LocalStorage.innerHTML = localStorage.username+"你好，歡迎來到我的網(wǎng)站！";</strong>
}
</script>
</head>

<body onload="onLoad()">
請輸入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存儲到localStorage</button>
<button id="btn_load">從localStorage讀取數(shù)據(jù)</button>

</body>
</html></span><span style="font-size: 18px;">
</span>

二、刪除localStorage

要想刪除某一條localStorage數(shù)據(jù)，可以調(diào)用removeItem方法或者delete屬性進(jìn)行刪除。

window.localStorage.removeItem("userdata");

delete window.localStorage.userdata;

delete.window.localStorage["userdata"];

要想刪除全部的localStorage數(shù)據(jù)，可以使用clear()方法。

localStorage.clear();

<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁存儲localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的瀏覽器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
		btn_clear.addEventListener("click",clearLocalStorage);
	}
}

function saveToLocalStorage(){
	localStorage.username = inputname.value;
}
function loadFromLocalStorage(){
	show_LocalStorage.innerHTML = localStorage.username+"你好，歡迎來到我的網(wǎng)站！";
}
function clearLocalStorage(){
	<strong>localStorage.clear();</strong>
	show_LocalStorage.innerHTML = localStorage.username;
}
</script>
</head>

<body onload="onLoad()">
請輸入你的姓名：<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存儲到localStorage</button>
<button id="btn_load">從localStorage讀取數(shù)據(jù)</button>
<button id="btn_clear">清除localStorage數(shù)據(jù)</button>

</body>
</html>

HTML5網(wǎng)頁存儲的相關(guān)知識

三、訪問sessionStorage

  • 存儲

    • window.sessionStorage.setItem(key,value);

    • window.sessionStorage [key] = [value];

    • window.sessionStorage.key= value;

  • 讀取

    • var v = window.sessionStorage.getItem(key);

    • var v = window.sessionStorage [key];

    • var v = window.sessionStorage.key;

  • 清除

    • window.sessionStorage.removeItem(key);

    • delete window.sessionStorage.key;

    • delete window.sessionStorage [key];

    • //全部清除

    • sessionStorage.clear();

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁存儲sessionStorage</title>
<script type="text/javascript">
function onLoad(){
	inputSpan.style.display = 'none';
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的瀏覽器不支持Web Storage");
	}
	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);
	}
}

function sendok(){
	localStorage.username = inputname.value;
	location.reload();		/*重載網(wǎng)頁*/
}
function login(){
	inputSpan.style.display = '';
}
function clearLocalStorage(){
	localStorage.clear();		/*情況localStorage*/
	show_LocalStorage.innerHTML = "已成功注銷！";
	btn_login.style.display = '';	/*顯示“登錄”按鈕*/
	inputSpan.style.display = '';	/*顯示姓名輸入框和“提交”按鈕*/
}
</script>
</head>

<body onload="onLoad()">
<button id="btn_login">登錄</button>
<button id="btn_logout">注銷</button><br />
<span id="inputSpan">請輸入你的姓名：<input type="text" id="inputname" value="" /><button id="btn_send">提交</button></span><br />
<p id="show_LocalStorage"></p><br />
</body>
</html></span><span style="font-weight: bold; font-size: 24px;">
</span>


注：JavaScript里的運(yùn)算符“+”不僅可以數(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)知識的簡略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注億速云行業(yè)資訊頻道哦！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手