Le stockage Web est une fonction très importante introduite par HTML5. Il peut stocker les données localement du côté client. Il est similaire aux cookies HTML4, mais il peut implémenter des fonctions beaucoup plus puissantes que les cookies. La taille du cookie est limitée à 4 Ko. Le responsable du stockage Web recommande 5 Mo par site Web.
Le stockage Web est divisé en deux types :SessionStorage
localstorage
Il peut être clairement vu dans le sens littéral que SessionStorage enregistre les données en session, et le navigateur est fermé; LocalStorage conserve les données localement sur le client;
Qu'il s'agisse de SessionStorage ou de LocalStorage, les API qui peuvent être utilisées sont les mêmes. Les couramment utilisés sont les suivants (en prenant un exemple localstorage):
Enregistrer les données: localStorage.SetItem (clé, valeur);
Lire les données: localStorage.GetItem (KEY);
Supprimer les données individuelles: localStorage.RemoveItem (clé);
Supprimer toutes les données: localStorage.Clear ();
Obtenez la clé d'un certain index: localStorage.Key (index);
Comme mentionné ci-dessus, la clé et la valeur doivent être des chaînes. En d'autres termes, l'API de stockage Web ne peut manipuler que des chaînes.
Ensuite, nous développons une applet de carnet d'adresses simple via le stockage Web pour démontrer comment utiliser les API associées; Nous voulons implémenter les fonctions suivantes:
Entrez la personne de contact. La personne de contact dispose de deux champs: nom et numéro de téléphone mobile, et utilisez le numéro de téléphone mobile comme clé pour le stocker dans localStorage;
Trouvez le propriétaire en fonction du numéro de téléphone portable;
Liste toutes les coordonnées actuellement enregistrées;
Tout d'abord, préparez une page HTML simple, comme suit :<! Doctype html>
<html>
<adal>
<meta charset = "utf-8" />
<Title> HTML5 Local Storage Web Storage Article </TITAL>
</ head>
<body>
<div style = "Border: 2px pointillé #ccc; largeur: 320px; texte-adign: Centre;">
<label for = "user_name"> name: </ label>
<input type = "text" id = "user_name" name = "user_name" />
<br/>
<étiquette pour = "MobilePhone"> Téléphone mobile: </ Label>
<input type = "text" id = "mobilephone" name = "mobilephone" />
<br/>
<input type = "bouton" onclick = "Save ()" value = "Ajouter un enregistrement" />
<hr />
<étiquette pour = "Search_Phone"> Entrez le numéro de téléphone mobile: </ Label>
<input type = "text" id = "search_phone" name = "search_phone" />
<input type = "bouton" onclick = "find ()" value = "Rechercher le propriétaire" />
<p id = "find_result"> <br/> </p>
</div>
<br/>
<div id = "list">
</div>
</docy>
</html>
L'interface s'affiche comme suit :Pour enregistrer les contacts, il vous suffit de simplement implémenter la méthode JS suivante:
// Enregistrer les données
fonction sauve () {
var mobilephone = document.getElementById ("MobilePhone"). Valeur;
var user_name = document.getElementById ("user_name"). valeur;
localStorage.SetItem (MobilePhone, user_name);
}
Pour implémenter le propriétaire de la recherche, la méthode JS suivante est implémentée :// trouver des données
Fonction Find () {
var search_phone = document.getElementById ("search_phone"). valeur;
var name = localStorage.getItem (search_phone);
var find_result = document.getElementById ("find_result");
Le propriétaire de find_result.innerhtml = search_phone + "est:" + name;
}
Pour afficher toutes les coordonnées enregistrées, vous devez utiliser la méthode localStorage.key (index), comme suit:
// Extraire tous les objets stockés dans localstorage et les afficher sur l'interface
fonction loadall () {
var list = document.getElementById ("list");
if (localStorage.length> 0) {
var result = "<Table Border = '1'>";
Résultat + = "<Tr> <Td> Nom </TD> <TD> Numéro de téléphone mobile </td> </tr>";
pour (var i = 0; i <localStorage.length; i ++) {
var mobilephone = localstorage.key (i);
var name = localStorage.getItem (MobilePhone);
Résultat + = "<tr> <td>" + Name + "</td> <td>" + MobilePhone + "</td> </tr>";
}
Résultat + = "</ Table>";
list.innerhtml = résultat;
}autre{
list.innerhtml = "Les données sont actuellement vides, dépêchez-vous et commencent à ajouter des contacts";
}
}
Les effets sont les suivants:
Question: Comme mentionné ci-dessus, il n'y a que 2 champs, nom et numéro de téléphone portable. Si vous souhaitez déposer des coordonnées plus riches, telles que le nom de l'entreprise, l'adresse d'accueil, etc., comment y parvenir? Le stockage Web n'est-il pas uniquement capable de traiter les chaînes? À l'heure actuelle, vous pouvez utiliser la méthode stringify () de JSON pour convertir des objets complexes en chaînes et les stocker dans le stockage Web; Lors de la lecture du stockage Web, vous pouvez les convertir en objets JSON via la méthode Parse () de JSON;
La brève démonstration suivante ajoute des attributs de l'entreprise pour enregistrer le code JS :// Enregistrer les données
fonction sauve () {
var contact = nouvel objet;
contact.user_name = document.getElementById ("user_name"). valeur;
contact.mobilephone = document.getElementById ("MobilePhone"). Valeur;
contacter.company = document.getElementById ("Company"). Valeur;
var str = json.stringify (contact);
LocalStorage.SetItem (Contact.Mobilephone, Str);
loadall ();
}
// Extraire tous les objets stockés dans localstorage et les afficher sur l'interface
fonction loadall () {
var list = document.getElementById ("list");
if (localStorage.length> 0) {
var result = "<Table Border = '1'>";
Résultat + = "<Tr> <Td> Nom </TD> <TD> mobile </td> <td> Company </td> </tr>";
pour (var i = 0; i <localStorage.length; i ++) {
var mobilephone = localstorage.key (i);
var str = localstorage.getItem (MobilePhone);
var contact = JSON.Parse (str);
Result + = "<tr> <td>" + contact.user_name + "</td> <td>" + contact.mobilephone + "</td> <td>" + contact.Company + "</td> </tr>";
}
Résultat + = "</ Table>";
list.innerhtml = résultat;
}autre{
list.innerhtml = "Les données sont actuellement vides, dépêchez-vous et commencent à ajouter des contacts";
}
}
Les effets sont les suivants: