Maison >interface Web >Tutoriel H5 >Raid sur l'extension 3 de l'API Javascript HTML5 : une nouvelle expérience des compétences du didacticiel local storage_html5
Raid sur l'extension 3 de l'API Javascript HTML5 : une nouvelle expérience des compétences du didacticiel local storage_html5
- WBOYoriginal
- 2016-05-16 15:50:011403parcourir
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 :
< ;head>
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 :
Copier le code
Le code est le suivant :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 :
Copiez le code
Le code est le suivant :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 :
Copier le code
Le code est le même suit :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 :
Copiez le code
Le code est le suivant :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" ]
*/
Copiez le code Le code est le suivant :
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 : localStorage.setItem(itemId, values.join(';'));
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert( 'Quota dépassé !');
}
}
Copier le codeLe code est le suivant :
< ;head>
- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur