Guide HTML5-5. Utiliser le stockage Web pour stocker les paires clé-valeur data_html5.

Le contenu de cette leçon est d'introduire le stockage Web, qui est utilisé pour stocker les données des paires clé-valeur dans le navigateur. Il fonctionne comme les cookies précédents, mais il est meilleur et peut stocker des données plus volumineuses. Il existe deux types de stockage Web : le stockage local et le stockage de session. Ils utilisent le même mécanisme de mise en œuvre, mais ont une visibilité et des cycles de vie différents.
1. Utiliser le stockage local
Nous utilisons l'objet localStorage pour accéder au stockage local. Il renvoie l'objet Storage est utilisé pour stocker les données de la paire clé-valeur. méthodes :
clear() : efface les données de la paire clé-valeur stockée ;
getItem() : récupère la valeur via la clé
key() : récupère la valeur de la clé ; through index;
length : renvoie le nombre de paires clé-valeur
removeItem() : supprime les données spécifiées par clé
setItem(,) : Ajoute une paire clé-valeur. Lorsque la paire clé-valeur de la clé spécifiée existe, l'opération de mise à jour est implémentée
[] : utilisez la clé pour obtenir la valeur spécifiée via l'indice du tableau ;
L'objet Storage nous permet de stocker les données d'une paire clé-valeur sous forme de chaînes. La clé est unique, ce qui signifie que lorsque nous utilisons la méthode setItem pour ajouter une paire clé-valeur, si la valeur clé existe déjà, elle est déjà utilisée. sera mis à jour. Regardons l'exemple suivant :

Copiez le code

Le code est le suivant :

< !DOCTYPE HTML>


: left;}
table{border-collapse: collapse;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
input {border : noir uni fin ; padding : 2 px ;}
label{min-width : 50px;display : inline-block;text-align : right;}
#countmsg, #buttons{margin-left : 50px ;marge en haut : 5px;marge en bas : 5px;}

;
Clé :

;Valeur :< ;/label>

="ajouter" >Ajouter
Effacer

Il y a < span id="count">items

> Nombre d'articles :
- <script> <br>displayData(); <br>var boutons = document.getElementsByTagName('button'); ; i ) { <br>boutons[i].onclick = handleButtonPress; <br>} <br>function handleButtonPress(e) { <br>switch (e.target.id) { <br>case 'add': <br>var key = document.getElementById('key').value; <br>var value = document.getElementById('value').value; <br>localStorage.setItem(key, value); <br>case 'clear': <br>localStorage.clear(); <br>break; <br>displayData(); <br>function displayData() { <br>var tableElement = document.getElementById ('data'); <br>tableElement.innerHTML = ''; <br>var itemCount = localStorage.length; <br>document.getElementById('count').innerHTML = itemCount; (var i = 0; i < itemCount; i ) { <br />var key = localStorage.key(i); <br />var val = localStorage.getItem(key); tr>< th>' clé ':</th><td>' val '</td></tr>'; <br>&lt ;/corps> <br></html><br><strong>Jetons un coup d'œil aux résultats en cours</strong> : <br> <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201301/201301071600355.png" class="lazy" alt=""></p> <br>Le navigateur ne peut pas supprimer les données que nous avons créées via localStorage à moins que l'utilisateur ne les supprime. <br><strong>2. Écoutez les événements de stockage </strong> <br>Les données stockées via le stockage local sont visibles pour les documents provenant de la même source. Par exemple, si vous ouvrez deux navigateurs Chrome pour accéder à la même adresse URL, sur n'importe lequel. page Le stockage local créé sur la page est également visible sur une autre page. Cependant, si vous utilisez un autre navigateur (tel que Firefox) pour ouvrir la même adresse URL, le stockage local ne sera pas visible car ils ont des sources différentes. L'événement Storage est utilisé pour surveiller les modifications dans le contenu du stockage. Voyons quels attributs il contient : <br>key : renvoie la valeur de clé modifiée <br>oldValue : renvoie la valeur avant que la valeur de clé ne soit modifiée ; : Renvoie la nouvelle valeur de la valeur de clé modifiée ; <br>url : L'adresse URL modifiée <br>storageArea : Renvoie l'objet Storage modifié (qu'il s'agisse d'un stockage local ou d'un stockage de session). <br>Regardons un exemple ci-dessous : <br><br><br><div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode116'));">Copiez le code<u></u></span>Le code est le suivant :</div></div> <div class="msgborder" id="phpcode116"> <!DOCTYPE HTML> <br><html> <br><head> <br><titre>Stockage</titre> -collapse : réduire ; } <br>th, td{padding : 4px;} <br></style> <br></head> data" border=" 1"> <br><tr> <br><th>key</th> <br><th>oldValue</th> <br><th>newValue</ th> <br> <th>url</th> <br><th>storageArea</th> 🎜>var tableElement = document.getElementById('data'); <br>window.onstorage = function (e) { <br>var row = '<tr>' <br>row = '<td>' e.key '</td>'; <br>ligne = '<td>' e.oleValue '</td>' <br>ligne = '<td>' /td>'; <br>ligne = '<td>' e.url '</td>' <br>ligne = '<td>' (e.storageArea == localStorage) '</ td></ tr>'; <br>tableElement.innerHTML = row; <br></script> 🎜>
Les données que nous avons ajoutées, supprimées et modifiées dans le stockage dans l'exemple 1 seront affichées sur la page de l'exemple 2. L'exemple 2 s'exécute normalement dans le navigateur Chrome, mais Firefox ne répond pas. Les autres navigateurs n'ont pas été testés.

Résultat d'exécution
 :




3. Utiliser le stockage de session
Le stockage de session est utilisé de la même manière que le stockage local, sauf que son accessibilité est limitée à la page actuelle et qu'il disparaîtra après la fermeture de la page.