Pourquoi devons-nous sauvegarder les données du client ? Le stockage des données sur le client peut résoudre de nombreux problèmes et réduire la transmission inutile de données :
1. Peut enregistrer l'état du programme : l'utilisateur peut savoir où il a travaillé après avoir fermé le navigateur et l'avoir ouvert. encore une fois.
2. Possibilité de mettre en cache les données : Il n'est pas nécessaire d'obtenir des données du serveur à chaque fois pour beaucoup de données qui ne changent pas.
3. Peut enregistrer les préférences de l'utilisateur : ce type de données n'a généralement pas besoin d'être stocké sur le serveur.
Approche précédente Avant le stockage local HTML5, si nous voulions sauvegarder des données persistantes sur le client, nous avions plusieurs options :
1. Les inconvénients des cookies HTTP sont évidents, ils ne peuvent stocker que jusqu'à 4 Ko de données et chaque requête HTTP sera renvoyée au serveur en texte clair (sauf si vous utilisez SSL).
2. Données utilisateur IE. userData est une solution de stockage local lancée par Microsoft lors de la guerre des navigateurs des années 1990. Elle utilise l'attribut behavior du DHTML pour stocker des données locales. Elle permet à chaque page de stocker jusqu'à 64 000 données et à chaque site de stocker jusqu'à 640 000 données. Les lacunes de userData sont évidentes. Cela ne fait pas partie des standards du Web, donc à moins que votre application n'ait besoin de prendre en charge IE, cela est de peu d'utilité.
3.Cookies Flash. Le cookie Flash n'est en fait pas la même chose que le cookie HTTP. Peut-être que son nom devrait s'appeler « Stockage local Flash ». Le cookie Flash permet à chaque site Web de stocker pas plus de 100 Ko de données par défaut. S'il dépasse, Flash demandera automatiquement une mise à jour. de l'utilisateur. Grand espace de stockage, avec l'aide de l'interface ExternalInterface de Flash, vous pouvez facilement exploiter le stockage local de Flash via Javascript. Le problème avec Flash est simplement qu'il s'agit de Flash.
4. Google Gears. Gears est un plug-in de navigateur open source publié par Google en 2007, visant à améliorer la compatibilité des principaux navigateurs. Gears dispose d'une base de données SQL intégrée basée sur SQLite et fournit une API unifiée pour accéder à la base de données après avoir obtenu les utilisateurs. autorisation, chaque site peut stocker des données de n'importe quelle taille dans la base de données SQL. Le problème avec Gears est que Google lui-même ne l'utilise plus.
La variété éblouissante des technologies entraîne des problèmes de compatibilité des navigateurs. Ce que tout le monde utilise probablement le plus ici, ce sont les cookies.
Nouvelle expérience en HTML5 En réponse aux problèmes ci-dessus, HTML5 fournit une solution plus idéale : si ce que vous devez stocker est simplement une paire clé/valeur, il peut s'agir de données résolues, vous pouvez utiliser le stockage Web.
Par rapport aux cookies, le stockage Web présente de nombreux avantages, qui peuvent être résumés comme suit :
1. Espace de stockage plus grand : chaque espace de stockage indépendant sous IE8 est de 10 Mo, et les autres navigateurs ont des implémentations légèrement différentes, mais sont beaucoup plus grandes. que Cookie.
2. Le contenu stocké ne sera pas envoyé au serveur : lorsqu'un cookie est défini, le contenu du cookie sera envoyé au serveur avec la requête, ce qui constitue un gaspillage de bande passante pour les données stockées localement. Les données de Web Storage n'existent que localement et n'interagissent en aucune façon avec le serveur.
3. Interfaces plus riches et plus faciles à utiliser : Web Storage fournit un ensemble d'interfaces plus riches, facilitant les opérations sur les données.
4. Espace de stockage indépendant : Chaque domaine (y compris les sous-domaines) dispose d'un espace de stockage indépendant. Chaque espace de stockage est complètement indépendant, il n'y aura donc pas de confusion de données.
Classification du stockage Web Le stockage Web se compose en fait de deux parties : sessionStorage et localStorage.
sessionStorage est utilisé pour stocker localement les données dans une session. Ces données ne sont accessibles que par les pages de la même session et les données seront détruites à la fin de la session. Par conséquent, sessionStorage n'est pas un stockage local persistant, mais uniquement un stockage au niveau de la session.
LocalStorage est utilisé pour le stockage local persistant, à moins que les données ne soient activement supprimées, les données n'expireront jamais.
Vérifiez si le stockage Web est pris en charge Le stockage Web est pris en charge dans tous les principaux navigateurs, mais afin d'être compatible avec les navigateurs plus anciens, vous devez toujours vérifier si cette technologie peut être utilisée.
Première méthode : Vérifiez si le navigateur prend en charge le stockage Web en vérifiant si l'objet Storage existe :
if(typeof(Storage)!=="undefined"){
// Oui ! Prise en charge de localStorage et sessionStorage
// Du code.. ..
} else {
// Désolé ! Pas de support de stockage Web..
}
La deuxième façon consiste à vérifier les objets respectifs séparément, par exemple, vérifiez si localStorage prend en charge :
if (typeof(localStorage) == 'undefined' ) {
alert('Votre navigateur ne prend pas en charge HTML5 localStorage. Essayez de mettre à niveau.'
} else {
// Oui ! Prise en charge de localStorage et de sessionStorage !
// Du code.....
}
ou :
if('localStorage' in window && window['localStorage'] !== null) {
// Oui ! Prise en charge de localStorage et de sessionStorage !
// Du code.....
} else {
alert('Votre navigateur ne prend pas en charge HTML5 localStorage. Essayez de mettre à niveau.') ;
}
ou
if (!!localStorage) {
// Oui ! Prise en charge de localStorage et de sessionStorage
// Du code.....
} else {
alert('Votre navigateur ne prend pas en charge HTML5 localStorage. Essayez de mettre à niveau.');
}
Évidemment, la première méthode est la plus directe et la plus simple.
Utilisation du stockage Web Web Storage stocke les paires clé-valeur et le navigateur les stocke sous forme de chaînes. Pensez à les convertir dans d'autres formats si nécessaire.
Sauf utilisations différentes, sessionStorage et localStorage ont la même liste de membres :
key = value : stocker la paire clé-valeur
setItem(key, value) : stocker la paire clé-valeur
getItem(key) : obtenir la paire clé-valeur
removeItem(key ) : Supprimer toutes les paires clé-valeur
clear() : Effacer toutes les paires clé-valeur
length : Le nombre de paires clé-valeur
Il convient de le souligner ici : la méthode setItem(key,value ) peut être n'importe quel type en théorie, mais en fait le navigateur appellera la méthode toString de valeur pour obtenir sa valeur de chaîne et la stocker localement, donc s'il s'agit d'un type personnalisé, vous devez définir une méthode significative vous-même toString. Par exemple, l'exemple suivant est utilisé en combinaison avec JSON.stringify :
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person)); >JSON.parse(localStorage.getItem( 'me')).name; // 'rainman'
/**
* JSON.stringify, convertissez les données JSON en chaîne
* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred ", "âge":24}'
* JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'
* JSON.parse, inverser JSON.stringify
* JSON.parse('["a","b","c"]') // ["a","b","c" ]
*/
De plus, lors de l'ajout d'une valeur-clé paires, si le nombre ajouté est relativement grand, comparez. Le moyen le plus sûr est de vérifier s'il y a une exception dépassant la limite :
try {
localStorage.setItem(itemId, values.join(';'));
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert( 'Quota dépassé !');
}
}
La méthode de Web Storage est très simple. exemple compte le nombre de clics sur le bouton :
< ;head>
;/p>
< /div>
Cliquez sur le bouton pour voir le compteur augmenter.
Fermez l'onglet (ou la fenêtre) du navigateur et réessayez, et le compteur continuera à compter (n'est pas réinitialisé).
Dans l'exemple ci-dessus, vous pouvez remplacer localStorage par sessionStorage, cliquer plusieurs fois sur le bouton et vérifier l'effet avant et après la fermeture du navigateur.
Problèmes existants Les failles du Web Storage se concentrent principalement sur sa sécurité, ce qui se reflète spécifiquement dans les deux points suivants :
1 Le navigateur allouera un stockage indépendant pour chaque domaine. espace, c'est-à-dire que le script du domaine A ne peut pas accéder à l'espace de stockage du domaine B, mais le navigateur ne vérifiera pas si le domaine où se trouve le script est le même que le domaine actuel. Autrement dit, un script intégré dans le domaine A du domaine B peut toujours accéder aux données du domaine B.
2. Les données stockées localement ne sont pas cryptées et n'expireront jamais, ce qui peut facilement provoquer des fuites de confidentialité.
De plus, pour plus de questions liées à la sécurité, veuillez vous référer aux liens dans la référence pratique ci-dessous.
Liste des autres spécifications (à titre indicatif, peut-être qu'elles disparaîtront quand)
Base de données Web
Dans l'ancienne proposition HTML5, vous pouvez l'utiliser si vous avez besoin de stocker des données complexes Web Database peut utiliser SQL comme un programme client (le standard Web Database a été abandonné, je le mentionnerai donc brièvement ici
globalStorage Ceci est également proposé en html5 et fermé dans le) ; navigateur À l'avenir, les informations stockées à l'aide de globalStorage pourront toujours être conservées. Comme localStorage, les informations stockées dans n'importe quelle page du domaine peuvent être partagées par toutes les pages, mais actuellement, seul FireFox le prend en charge.
Syntaxe de base :
• globalStorage['developer.mozilla.org'] - Tous les sous-domaines sous Developer.mozilla.org peuvent lire et écrire via cet objet de stockage d'espace de noms.
• globalStorage['mozilla.org'] - Toutes les pages Web sous le nom de domaine mozilla.org peuvent être lues et écrites via cet objet de stockage d'espace de noms.
• globalStorage['org'] - Toutes les pages Web sous le nom de domaine .org peuvent être lues et écrites via cet objet de stockage d'espace de noms.
• globalStorage[''] - Toute page Web sous n'importe quel nom de domaine peut lire et écrire via cet objet de stockage d'espace de noms
Attributs de la méthode :
• setItem(key, value) - Définir ou réinitialiser la valeur de la clé.
• getItem(key) – Obtient la valeur clé.
• removeItem(key) – Supprime la valeur clé.
• Définir la valeur de la clé : window.globalStorage["planabc.net"].key = value;
• Obtenir la valeur de la clé : value = window.globalStorage["planabc.net"].key
Autres; Fonctionnalités :
• Le délai d'expiration est le même que celui de localStorage, et certaines autres fonctionnalités sont également similaires à celui de localStorage.
• Actuellement, Firefox ne prend en charge que le stockage globalStorage sous le domaine actuel, si vous utilisez le domaine public, cela provoquera une erreur similaire au code « Erreur de sécurité » : « 1000 ».
IndexedDB La dernière chose que nous souhaitons introduire est IndexedDB. Par rapport aux deux autres spécifications, seul Firefox implémente actuellement IndexedDB (d'ailleurs, Mozilla a déclaré qu'il n'implémenterait jamais la base de données Web SQL). , mais Google a déclaré qu'il envisageait d'ajouter la prise en charge d'IndexDB à Chrome.
IndexedDB introduit le concept de magasin d'objets, qui est un peu comme une base de données SQL. Vous pouvez stocker des "enregistrements" dans la "base de données", et chaque "enregistrement" peut avoir plusieurs "champs", chaque champ a pour un. type de données spécifique, vous pouvez sélectionner un sous-ensemble d'enregistrements et les parcourir à l'aide du "curseur", et toutes les modifications dans le magasin d'objets sont basées sur des "transactions".
Pour plus d'informations, consultez la documentation sur IndexedDB dans FireFox dans la référence d'utilisation plus tard.
Référence pratique : Documentation officielle :
http://www.w3schools.com/html5/Script House :
http://www .jb51.net/w3school/html5/Sécurité du stockage local :
http://www.mhtml5.com/2012/03/4586.htmlFonctionnalité expérimentale de FireFox IndexedDB : https://developer.mozilla.org/en-US/docs/IndexedDB
Résumé des connaissances de base de Java
STYLE.CONTEXTE
Le Bitcoin est-il légal en Chine ?
Quel est le format du document ?
La différence entre le rembourrage cellulaire et l'espacement cellulaire
Comment ouvrir un site Web 404
Solution à l'invite de table de partition non valide au démarrage de Windows 10
Classements des échanges de crypto-monnaie
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
