HTML5 fournit deux méthodes de stockage Web, localStorage et sessionStorage
La différence entre localStorage et sessionStorage
LocalStorage n'a pas de délai d'expiration. Les données seront enregistrées tant qu'elles ne seront pas effacées ou supprimées.
sessionStorage stocke les données d'une session. Le cycle de vie est le même que celui de la session. Lorsque l'utilisateur ferme le navigateur, les données seront supprimées.
Caractéristiques :
1.La capacité prise en charge par défaut de localStorage est d'une station5M, lorsque l'appel de setItem dépasse la limite supérieure, l'exception QuotaExceededError sera déclenchée. Bien entendu, certains navigateurs prennent en charge la modification de la limite supérieure de capacité, mais afin d'être compatible avec d'autres navigateurs, il est préférable d'utiliser la capacité de 5 Mo.
2.localStorage enregistre les données sous la forme de valeur-clé, et la clé et la valeur ne peuvent être qu'au format chaîne. Par conséquent, une fois le nombre 1 enregistré, il sera converti en chaîne 1.
3.LocalStorage peut être écrit et lu des manières suivantes :
localStorage.name = 'fdipzone';
name = localStorage.name;
localStorage['name'] = 'fdipzone';
name = localStorage['name'];
localStorage.setItem('name', 'fdipzone');
name = localStorage.getItem('name');
Copier après la connexion
localStorage[ La clé ] = La méthode d'écriture de valeur est prise en charge par tous les navigateurs grand public. Le responsable n'a pas indiqué quelle méthode d'écriture est la norme. Mais si vous exécutez le code suivant, localStorage deviendra invalide.
localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;
Copier après la connexion
Par conséquent, il est recommandé d'utiliser setItem(), getItem(), removeItem(), clear() pour implémenter l'écriture, la lecture et suppression, Vide.
4.Si vous souhaitez enregistrer du contenu sans chaîne, il est recommandé d'utiliser JSON pour le traitement. Lors de l'écriture de données, utilisez JSON.stringify pour les convertir en chaîne, et lors de la lecture de données, utilisez JSON.parse pour convertir la chaîne dans le format précédent.
Exemple 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>Copier après la connexion
Exemple 2 : Utilisation de JSON .stringify et JSON.parse encapsulent les données
<!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>Copier après la connexion
Écoutez la valeur de localStorage et synchronisez les données de la page lorsque des modifications se produisent
Lors de l'appel de setItem(), removeItem(), clear(), vous pouvez écouter ces événements pour faciliter la mise à jour des données entre les différentes pages.
// 监听数据变化,当数据发生变化时,同步数据显示
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;
// 执行同步数据处理...
}Copier après la connexion
Cet article explique la différence entre HTML5 localStorage et sessionStorage Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.
Recommandations associées :
Explication sur la classe de comparaison du contenu des fichiers zip php
Comment obtenir/définir la classe de langue de la page d'accès utilisateur via php
Calculer le chemin relatif entre deux fichiers via Méthode php
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
