Speicherung von HTML5-Webseiten-HTML-Tutorial-php.cn

Dieses Mal werde ich Ihnen die HTML5-Webseitenspeicherung und die Vorsichtsmaßnahmen für die HTML5-Webseitenspeicherung vorstellen. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

HTML5 Web Storage Web Storage

1. Web Storage verstehen

Web Storage ist eine Technologie, die kleine Datenmengen auf der Festplatte des Clients speichert. Solange der Browser die WebStorage-API-Spezifikation unterstützt, können Webdesigner JavaScript verwenden, um ihn zu bedienen. Lassen Sie uns zunächst Web Storage verstehen.

Die Kapazität des Webspeichers wird vom Client-Browser bestimmt, normalerweise 1 MB ~ 5 MB.

Web Storage führt lediglich den Client aus und sendet nicht jede Webseitenanfrage an den Server.

Web Storage speichert Daten in einer Reihe von Schlüssel-Wert-Paaren.

Web Storage bietet zwei Möglichkeiten, Daten auf dem Client zu speichern: eine ist localStorage und die andere ist sessionStorage. Der Unterschied zwischen den beiden liegt im Deklarationszyklus und im gültigen Bereich.

sessionStorage

**表一 Web Storage类型的差异**
Web Storage类型	生命周期	有效范围
localStorage	执行删除命令时才会消失	同一网站的网页可以跨窗口和分页
sessionStorage	浏览器窗口或分页（tab）关闭就会消失	仅对当前浏览器窗口或分页有效

Tabelle 1 Unterschiede in den Webspeichertypen

Webspeichertyp

Lebenszyklus

Gültiger Bereich

localStorage

Es verschwindet erst, wenn der Löschbefehl ausgeführt wird

Webseiten auf derselben Website können sich über Fenster und Seiten erstrecken

Es verschwindet, wenn das Browserfenster oder die Registerkarte (Tab) geschlossen wird

Nur für das aktuelle Browserfenster. Oder die Paginierung ist gültig

Überprüfen Sie, ob der Browser Web Storage unterstützt. Die Syntax lautet wie folgt:

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

Nach dem Login kopieren

Hinweis: IE und Firefox-Test Sie müssen die Datei zum Ausführen auf den Server oder Localhost hochladen. Es wird empfohlen, beim Testen den Browser Google Chrome zu verwenden.

2. Spezifisches Lernen

1. Zugriff auf localStorage

Die gleiche Website bedeutet, dass das Protokoll, der Host (Domäne und IP) und der Übertragungsport (Port) identisch sein müssen.

WebStorage ermöglicht nur die Speicherung von String-Daten Es gibt die folgenden 3 Möglichkeiten, auf localStorage zuzugreifen. Das vorherige Fenster muss nicht sein geschrieben

setItem- und getItem-Methoden des Speicherobjekts (Schlüssel: „userdata“, Wert: „Hello World“ )

Speicher: window.localStorage.setItem(key, Wert);
Lesen: var v = window.localStorage.getItem(key);

Array-Index

Speicher: window.localStorage[Schlüssel] =Wert;
Lesen: var v = window.localStorage[key];

Eigenschaften

Speicher: window.localStorage.Schlüssel =Wert;
Lesen: var v = window.localStorage.Schlüssel ;

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储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+"你好，欢迎来到我的网站！";</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读取数据</button>

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

Nach dem Login kopieren

2. LocalStorage löschen

Wenn Sie einen bestimmten Teil der localStorage-Daten löschen möchten, können Sie die Methode „removeItem“ oder das Attribut „delete“ aufrufen, um ihn zu löschen.

window.localStorage.removeItem("userdata");

window.localStorage.userdata löschen;

delete.window.localStorage["userdata"];

Um alle localStorage-Daten zu löschen, können Sie die Methode clear() verwenden.

localStorage.clear();

<!DOCTYPE html>
<html>
<head>
<title>网页存储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+"你好，欢迎来到我的网站！";
}
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读取数据</button>
<button id="btn_clear">清除localStorage数据</button>

</body>
</html>

Nach dem Login kopieren

Speicherung von HTML5-Webseiten

3. Auf den Sitzungsspeicher zugreifen

Speicher

window.sessionStorage.setItem(key ,Wert);
window.sessionStorage [ Schlüssel] = [Wert];
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>网页存储sessionStorage</title>
<script type="text/javascript">
function onLoad(){
	inputSpan.style.display = &#39;none&#39;;
	if(typeof(Storage)=="undefined"){
		alert("Sorry！你的浏览器不支持Web Storage");
	}
	else{
		/*判断姓名是否已经存入localStorage，已存入时才执行{ }内的命令*/
		if(localStorage.username){
			/*数据不存在时返回undefined*/
				if(!localStorage.counter){
					localStorage.counter = 1;	/*初始值设为1*/
				}
				else{
					localStorage.counter++;		/*递增*/
				}
				btn_login.style.display = &#39;none&#39;;	/*隐藏“登录”按钮*/
				show_LocalStorage.innerHTML = localStorage.username+"你好，这是你第"+localStorage.counter+"次来到网站";
		}
		btn_login.addEventListener("click",login);
		btn_send.addEventListener("click",sendok);
		btn_logout.addEventListener("click",clearLocalStorage);
	}
}

function sendok(){
	localStorage.username = inputname.value;
	location.reload();		/*重载网页*/
}
function login(){
	inputSpan.style.display = &#39;&#39;;
}
function clearLocalStorage(){
	localStorage.clear();		/*情况localStorage*/
	show_LocalStorage.innerHTML = "已成功注销！";
	btn_login.style.display = &#39;&#39;;	/*显示“登录”按钮*/
	inputSpan.style.display = &#39;&#39;;	/*显示姓名输入框和“提交”按钮*/
}
</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>

Nach dem Login kopieren

注：JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"

上例中localStorage.counter++;如果改成localStorage.counter = localStorage.counter +1;就会出现”11111......“

JavaScript将字符串转换成为数字可以用Number()方法，localStorage.counter =Number(localStorage.counter )+1;

Das obige ist der detaillierte Inhalt vonSpeicherung von HTML5-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!