HTML5 bietet zwei Webspeichermethoden, localStorage und sessionStorage
Der Unterschied zwischen localStorage und sessionStorage
LocalStorage hat keine Ablaufzeit. Die Daten werden gespeichert, solange sie nicht gelöscht oder entfernt werden.
sessionStorage speichert Daten für eine Sitzung. Der Lebenszyklus ist der gleiche wie der der Sitzung. Wenn der Benutzer den Browser schließt, werden die Daten gelöscht.
Eigenschaften:
1.Die standardmäßig unterstützte Kapazität von localStorage ist eine Station5M: Wenn der Aufruf von setItem die Obergrenze überschreitet, wird die Ausnahme QuotaExceededError ausgelöst. Natürlich unterstützen einige Browser das Ändern der Obergrenze der Kapazität, aber um mit anderen Browsern kompatibel zu sein, ist es am besten, die 5-Megapixel-Kapazität zu verwenden.
2.localStorage speichert Daten in Form von Schlüsselwert, und Schlüssel und Wert können nur im Zeichenfolgenformat vorliegen. Daher wird die Nummer 1 nach dem Speichern in eine Zeichenfolge 1 umgewandelt.
3.Die Schreib- und Lesemethoden von localStorage sind wie folgt:
localStorage.name = 'fdipzone';
name = localStorage.name;
localStorage['name'] = 'fdipzone';
name = localStorage['name'];
localStorage.setItem('name', 'fdipzone');
name = localStorage.getItem('name');
Nach dem Login kopieren
localStorage[key] Das = Die Schreibmethode für Werte wird von allen gängigen Browsern unterstützt, der Beamte hat jedoch nicht angegeben, welche Schreibmethode der Standard ist. Wenn Sie jedoch den folgenden Code ausführen, wird localStorage ungültig.
localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;
Nach dem Login kopieren
Daher wird empfohlen, setItem(), getItem(), removeItem(), clear() zu verwenden, um das Schreiben, Lesen, Löschen und Löschen zu implementieren .
4.Wenn Sie Nicht-String-Inhalte speichern möchten, empfiehlt es sich, JSON für die Verarbeitung zu verwenden. Verwenden Sie beim Schreiben von Daten JSON.stringify, um sie in eine Zeichenfolge umzuwandeln, und beim Lesen von Daten verwenden Sie JSON.parse, um die Zeichenfolge in das vorherige Format zu konvertieren.
Beispiel 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> Local Storage and Session Storage </title>
</head>
<body>
<p>姓名:<input type="text" name="name" id="name"></p>
<p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
<p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="removeBtn" value="remove name"> <input type="button" id="clearBtn" value="clear"> </p>
<script type="text/javascript">
var oStorage = window.localStorage;
function $(id){
return document.getElementById(id);
}
// 保存数据
$('saveBtn').onclick = function(){
oStorage.setItem('name', $('name').value);
if($('gender1').checked==true){
oStorage.setItem('gender', 1);
}else if($('gender2').checked==true){
oStorage.setItem('gender', 2);
}
}
// 获取数据
$('getBtn').onclick = function(){
$('name').value = oStorage.getItem('name');
if(oStorage.getItem('gender')==1){
$('gender1').checked = true;
}else if(oStorage.getItem('gender')==2){
$('gender2').checked = true;
}
}
// 删除数据name
$('removeBtn').onclick = function(){
oStorage.removeItem('name');
}
// 清空数据
$('clearBtn').onclick = function(){
oStorage.clear();
}
</script>
</body>
</html>Nach dem Login kopieren
Beispiel 2: Verwendung von JSON.stringify Kapseln Sie Daten mit JSON.parse
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> Local Storage and Session Storage </title>
</head>
<body>
<p>姓名:<input type="text" name="name" id="name"></p>
<p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
<p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="clearBtn" value="clear"> </p>
<script type="text/javascript">
var oStorage = window.localStorage;
function $(id){
return document.getElementById(id);
}
// 保存数据
$('saveBtn').onclick = function(){
var name = $('name').value;
var gender;
if($('gender1').checked==true){
gender = 1;
}else if($('gender2').checked==true){
gender = 2;
}
var data = {};
data['name'] = name;
data['gender'] = gender;
oStorage.setItem('data', JSON.stringify(data));
}
// 获取数据
$('getBtn').onclick = function(){
var data = JSON.parse(oStorage.getItem('data'));
if(data){
var name = data['name'];
var gender = data['gender'];
$('name').value = name;
if(gender==1){
$('gender1').checked = true;
}else if(gender==2){
$('gender2').checked = true;
}
}
}
// 清空数据
$('clearBtn').onclick = function(){
oStorage.clear();
}
</script>
</body>
</html>Nach dem Login kopieren
Überwachen Sie den Wert von localStorage und synchronisieren Sie Seitendaten, wenn Änderungen auftreten
Wenn Sie setItem(), removeItem(), clear() aufrufen, können Sie diese Ereignisse abhören, um die Datenaktualisierung zwischen verschiedenen Seiten zu erleichtern.
// 监听数据变化,当数据发生变化时,同步数据显示
window.onstorage = function(event){
var status = {}
status.key = event.key;
status.oldValue = event.oldValue;
status.newValue = event.newValue;
status.url = event.url;
status.storage = event.storageArea;
// 执行同步数据处理...
}Nach dem Login kopieren
In diesem Artikel wird der Unterschied zwischen HTML5 localStorage und sessionStorage erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Erklärung zum Inhaltsvergleichskurs für PHP-Zip-Dateien
So erhalten/setzen Sie die Sprachklasse der Benutzerzugriffsseite über PHP
Berechnen Sie den relativen Pfad zwischen zwei Dateien durch PHP-Methode
Das obige ist der detaillierte Inhalt vonÜber den Unterschied zwischen HTML5 localStorage und sessionStorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
