Le contenu de cette leçon est d'introduire le stockage Web, qui l'utilise pour stocker les données des paires de valeurs clés dans le navigateur. Il est fonctionnellement comme les cookies précédents, mais c'est mieux et les données stockées peuvent être plus grandes. Il existe deux types de stockage Web: le stockage local et le stockage de session, qui utilisent le même mécanisme d'implémentation, sauf que la visibilité et le cycle de vie sont différents.
1. Utilisez le stockage localNous utilisons l'objet LocalStorage pour accéder au stockage local, qui renvoie l'objet de stockage, qui est utilisé pour stocker les données des paires de valeurs clés. Il a les propriétés et méthodes suivantes:
Clear (): stocker clairement les données de paire de valeurs clés;
getItem (<yey>): obtenir de la valeur via la clé;
clé (<dex>): Obtenez la valeur de clé via l'index;
Longueur: renvoie le nombre de paires de valeurs clés;
Supprimer (<eyy Key>): Supprimez les données spécifiées via la touche;
setItem (<yey>, <value>): ajoutez une paire de valeurs de clé. Lorsque la paire de valeurs de clé de la clé spécifiée existe, l'opération de mise à jour est implémentée;
[<Key>]: Utilisez la touche pour obtenir la valeur spécifiée via l'indice du tableau.
L'objet de stockage nous permet de stocker des données de paire de valeurs clés sous forme de chaînes. La clé est unique, ce qui signifie que lorsque nous utilisons la méthode setItem pour ajouter des paires de valeurs clés, si la valeur de clé existe déjà, l'opération de mise à jour sera implémentée. Regardons l'exemple suivant:
<! Doctype html>
<html>
<adal>
<Title> Exemple </TITME>
<style>
corps> * {float: gauche;}
Tableau {Border-Collapse: effondrement; marge-gauche: 50px;}
th, td {rembourrage: 4px;}
th {text-agne: à droite;}
Entrée {Border: mince noir solide; rembourrage: 2px;}
Label {min-large: 50px; affichage: bloc en ligne; Text-Align: à droite;}
#CountMsg, #ButTons {margin-left: 50px; marge: 5px; marge-fond: 5px;}
</ style>
</ head>
<body>
<div>
<div>
<label> touche: </ label> <entrée id = "key" placeholder = "Entrée Key" /> </div>
<div>
<label> Valeur: </ Label> <INVE ID = "Value" Planholder = "Entrée Value" /> </div>
<div id = "boutons">
<Button id = "Add"> Ajouter </futton>
<Button id = "Clear"> Clear </ftont>
</div>
<p id = "countmsg"> Il y a <span id = "count"> </span> items </p>
</div>
<table id = "data">
<tr>
<th> Count d'objets: </th>
<td id = "count"> - </td>
</tr>
</ table>
<cript>
DisplayData ();
var boutons = document.getElementsByTagName ('bouton');
for (var i = 0; i <Buttons.length; i ++) {
boutons [i] .OnClick = hookbuttonpress;
}
Fonction HandlebuttonPress (e) {
commutateur (e.target.id) {
case «ajouter»:
var key = document.getElementById ('key'). valeur;
var valeur = document.getElementById ('valeur'). valeur;
localStorage.SetItem (clé, valeur);
casser;
cas «clair»:
localStorage.Clear ();
casser;
}
DisplayData ();
}
fonction displayData () {
var TableElement = document.getElementById ('data');
TableElement.innerHtml = '';
var itemCount = localStorage.length;
document.getElementById ('count'). innerHTML = itemCount;
pour (var i = 0; i <itemCount; i ++) {
var key = localStorage.key (i);
var val = localStorage.getItem (key);
TableElement.InnerHtml + = '<Tr> <Th>' + Key + ': </ Th> <Td>' + Val + '</td> </tr>';
}
}
</cript>
</docy>
</html>
Regardons les résultats en cours d'exécution :Le navigateur ne peut pas supprimer les données que nous avons créées via LocalStorage à moins que l'utilisateur ne les supprime.
2. Écoutez les événements de stockageLes données stockées via le stockage local sont visibles par le document de même original. Par exemple, si vous ouvrez deux navigateurs Chrome pour accéder à la même adresse URL, le stockage local créé sur n'importe quelle page est également visible à l'autre page. Cependant, si vous ouvrez la même adresse URL avec un autre navigateur (comme Firefox), le stockage local est invisible car ils ont des sources différentes. L'événement de stockage est utilisé pour écouter les modifications du contenu de stockage. Voyons quelles propriétés il contient:
Clé: renvoie la valeur de clé modifiée;
OldValue: renvoie la valeur avant le changement de la valeur clé;
NewValue: renvoie la nouvelle valeur de valeur dont la valeur clé a changé;
URL: l'adresse URL qui a changé;
StorageArea: renvoie l'objet de stockage modifié (stockage local ou stockage de session).
Regardons un exemple ci-dessous:
<! Doctype html>
<html>
<adal>
<Title> Storage </TITME>
<style>
Tableau {Border-Collapse: s'effondrer;}
th, td {rembourrage: 4px;}
</ style>
</ head>
<body>
<table id = "data">
<tr>
<h> clé </th>
<h> oldvalue </th>
<h> newValue </th>
<h> url </th>
<h> Storagearea </th>
</tr>
</ table>
<cript>
var TableElement = document.getElementById ('data');
window.onstorage = fonction (e) {
var row = '<tr>';
row + = '<td>' + e.key + '</td>';
row + = '<td>' + e.olevalue + '</td>';
row + = '<td>' + e.newvalue + '</td>';
row + = '<td>' + e.url + '</td>';
Row + = '<Td>' + (E.StorAgearea == localStorage) + '</td> </tr>';
TableElement.InnerHtml + = Row;
}
</cript>
</docy>
</html>
Dans l'exemple 1, nous ajoutons, supprimons et modifions les données de stockage et s'afficherons sur l'exemple 2 de la page. L'exemple 2 s'exécute normalement dans le navigateur Chrome, Firefox ne répond pas et d'autres navigateurs ne le testent pas.
Résultats en cours :3. Utilisez le stockage de session
Le stockage de session est le même que le stockage local utilisé, sauf que son accessibilité est limitée à la page actuelle, et elle disparaîtra après la fermeture de la page. Nous y accédons via SessionStorage.
<! Doctype html>
<html>
<adal>
<Title> Exemple </TITME>
<style>
corps> * {float: gauche;}
Tableau {Border-Collapse: effondrement; marge-gauche: 50px;}
th, td {rembourrage: 4px;}
th {text-agne: à droite;}
Entrée {Border: mince noir solide; rembourrage: 2px;}
Label {min-large: 50px; affichage: bloc en ligne; Text-Align: à droite;}
#CountMsg, #ButTons {margin-left: 50px; marge: 5px; marge-fond: 5px;}
</ style>
</ head>
<body>
<div>
<div>
<label> touche: </ label> <entrée id = "key" placeholder = "Entrée Key" /> </div>
<div>
<label> Valeur: </ Label> <INVE ID = "Value" Planholder = "Entrée Value" /> </div>
<div id = "boutons">
<Button id = "Add"> Ajouter </futton>
<Button id = "Clear"> Clear </ftont>
</div>
<p id = "countmsg"> Il y a <span id = "count"> </span> items </p>
</div>
<table id = "data">
<tr>
<th> Count d'objets: </th>
<td id = "count"> - </td>
</tr>
</ table>
<iframe src = "Storage.html"> </ iframe>
<cript>
DisplayData ();
var boutons = document.getElementsByTagName ("Button");
for (var i = 0; i <Buttons.length; i ++) {
boutons [i] .OnClick = hookbuttonpress;
}
Fonction HandlebuttonPress (e) {
commutateur (e.target.id) {
case «ajouter»:
var key = document.getElementById ("key"). valeur;
var valeur = document.getElementById ("valeur"). valeur;
SessionStorage.SetItem (clé, valeur);
casser;
cas «clair»:
SessionStorage.Clear ();
casser;
}
DisplayData ();
}
fonction displayData () {
var TableElement = document.getElementById ('data');
TableElement.innerHtml = '';
var itemCount = sessionStorage.length;
document.getElementById ('count'). innerHTML = itemCount;
pour (var i = 0; i <itemCount; i ++) {
var key = sessionstorage.key (i);
var val = sessionStorage.getItem (key);
TableElement.InnerHtml + = "<Tr> <Th>" + Key + ": </ Th> <Td>" + Val + "</td> </tr>";
}
}
</cript>
</docy>
</html>
Effet de course :Si vous apportez des modifications dans l'exemple 3, la page de l'exemple 2 ne changera pas.
Résumez :SessionStorage est utilisé pour stocker les données d'une session localement, qui ne peut être accessible que sur des pages de la même session et les données seront détruites une fois la session terminée. Par conséquent, SessionStorage n'est pas un stockage local persistant, mais seulement un stockage au niveau de la session.
LocalStorage est utilisé pour le stockage local persistant, et les données n'expireront jamais à moins qu'elles ne soient activement supprimées.
La différence entre le stockage Web et les cookies: le concept de stockage Web est similaire aux cookies, la différence est qu'elle est conçue pour un stockage de plus grande capacité. La taille du cookie est limitée, et chaque fois que vous demandez une nouvelle page, le cookie sera envoyé, ce qui gaspille de manière invisible la bande passante. De plus, le cookie doit être spécifié de portée et ne peut pas être appelé dans les domaines. En outre, le stockage Web a SetItem, GetItem, Retiritem, Clear et d'autres méthodes. Contrairement aux cookies, les développeurs frontaux doivent encapsuler les set cookies et les objets eux-mêmes. En outre, chaque domaine (y compris le sous-domaine) du stockage Web a un espace de stockage indépendant, et chaque espace de stockage est complètement indépendant, il ne provoquera donc pas la confusion des données.
Mais les cookies sont également indispensables: la fonction des cookies est d'interagir avec le serveur et existe dans le cadre de la spécification HTTP, tandis que le stockage Web n'est créé que pour stocker les données localement.
Téléchargement du code source