Heim > Artikel > Web-Frontend > Speicherung von HTML5-Webseiten
Speicherung von HTML5-Webseiten
- 零到壹度Original
- 2018-03-26 14:29:151507Durchsuche
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.
| Web Storage类型 | 生命周期 | 有效范围 |
| localStorage | 执行删除命令时才会消失 | 同一网站的网页可以跨窗口和分页 |
| sessionStorage | 浏览器窗口或分页（tab）关闭就会消失 | 仅对当前浏览器窗口或分页有效 |
Ü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程序代码
}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>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>
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 = 'none';
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 = 'none'; /*隐藏“登录”按钮*/
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 = '';
}
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里的运算符“+”不仅可以数字相加还可以字符串相加。例如"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!