hideout-lastation.com
Comment utiliser le stockage hors connexion HTML5 sur votre site Web
Outre de nouveaux éléments en HTML5, cette nouvelle technologie web nous offre le stockage hors ligne . Il existe plusieurs types de stockage hors connexion et dans cet article, nous discuterons spécifiquement de sessionStorage et localStorage. Le stockage hors ligne nous permet d'enregistrer des données dans le navigateur de l'utilisateur et de faire fonctionner nos applications ou jeux web sans connexion (pour une période de temps).
Dans un exemple concret, les développeurs peuvent tirer parti du stockage hors ligne en tant que sauvegarde dans le cas où la connexion Internet n'est pas disponible. Ils peuvent ensuite envoyer les données au serveur en ligne quand ils retrouvent la connectivité.
Si vous vous demandez comment utiliser la fonctionnalité de ce navigateur dans votre site Web, consultez cet article.
sessionStorage
sessionStorage est une forme de stockage qui stocke des données temporairement dans le navigateur. Les données de sessionStorage sont définies dans l'association de clé et de valeur et sont exclusives à la fenêtre ou à l'onglet du navigateur. Tant que le navigateur ou l'onglet est toujours ouvert, les données seraient toujours là, à moins que nous ne l'effacions intentionnellement ou que nous quittions le navigateur .
Pour stocker une donnée dans sessionStorage, nous pouvons utiliser .setItem() . Voici un exemple où nous stockons "Hello World".
sessionStorage.setItem ("keyExample", "Hello World"); Alternativement, nous pouvons également faire ce qui suit. Cela créera une entrée de données avec la clé anotherKeyName et la valeur "Hello Too" .
sessionStorage.anotherKeyExample = "Bonjour aussi";
Dans les navigateurs basés sur Webkit tels que Safari, Chrome et Opera, vous pouvez voir les données sous l'onglet Ressources . Dans Firefox, vous pouvez rechercher les données qui se trouvent sous l'onglet DOM Firebug.
Il est à noter que sessionStorage ne peut stocker qu'une chaîne ou un texte brut. Un integer sera traduit en chaîne.
Si vous avez des données JSON, vous devrez le formater en chaîne en utilisant JSON.stringify() et le récupérer en utilisant JSON.parse() pour convertir la chaîne en JSON. Voici quelques exemples de code:
var json = JSON.stringify ({[1, 2, 3]}); sessionStorage.anotherKeyExample = json; Récupération des données dans sesssionStorage
Nous avons également deux façons de récupérer les données de sessionStorage. Tout d'abord, nous pouvons utiliser .getItem() ou en pointant directement le nom de la clé, comme suit.
var a = sessionStorage.getItem ("keyExample"); var b = sessionStorage.anotherKeyExample; Suppression de données dans la sessionStorage
Comme mentionné ci-dessus, les données de sessionStorage seront supprimées lorsque l'utilisateur ferme la fenêtre ou l'onglet du navigateur. Mais nous pouvons aussi le supprimer intentionnellement. Nous pouvons utiliser la méthode .removeItem() ou la directive delete, comme ça.
sessionStorage.removeItem ("keyExample"); supprimer sessionStorage.anotherKeyExample; stockage local
Nous pouvons également stocker des données dans le navigateur sous une forme de localStorage . Mais contrairement à sessionStorage, les données localStorage sont persistantes; les données resteront dans le navigateur tant que nous ne le supprimerons pas intentionnellement.
Stocker les données dans localStorage est aussi simple que nous l'avons fait dans sessionStorage. En fait, les aspects techniques sont tous les mêmes, sauf que nous utilisons maintenant l'objet localStorage . Nous pouvons entrer une entrée de données, avec la méthode .setItem() ou la définir directement avec le nom de la clé, comme ceci.
localStorage.setItem ("keyName", "Bonjour, stockage local"); localStorage.anotherKeyName = 1; Nous .getItem() les données avec la méthode .getItem() .
var c = localStorage.getItem ("keyName"); var d = localStorage.anotherKeyName De même, nous pouvons supprimer l'entrée de données de localStroge avec la méthode .removeItem() et la directive delete .
Taille limite de stockage hors connexion
Les deux sessions sessionStorage et localStorage ont des limites en termes de capacité maximale, et chaque navigateur a sa propre limite. La limite de Firefox, Chrome et Opera est de 5 Mo par domaine. Internet Explorer offre plus d'espace avec 10 Mo par domaine. Assurez-vous donc que vos données ne dépassent pas la limite. Si vos données dépassent la limite, vous pouvez envisager l'autre alternative, telle que SQLite .
Détection de fonctionnalités
En outre, même si la prise en charge de sessionStorage et localStorage est assez importante (IE8 les prend en charge), vous pouvez toujours exécuter la détection des fonctionnalités du navigateur avant d'exécuter une fonction qui enregistre une entrée dans sessionStorage ou localStorage. C'est ainsi que vous pouvez ajouter une fonction de secours comme avec les cookies au cas où le navigateur ne supporte pas le formulaire de stockage hors ligne.
Vous pouvez utiliser Modernizr pour ce faire ou envelopper votre script avec cette instruction conditionnelle, comme ça.
if (window.localStorage) {} else {alert ('localStorage n'est pas disponible'); } Conclusion
Le stockage hors connexion est une fonction vraiment géniale qui permet aux applications Web et aux jeux de fonctionner hors connexion. Dans le passé, nous vous avons également montré comment l'utiliser dans de vrais exemples.
J'espère que ce court article pourrait vous aider à démarrer avec le stockage hors ligne.
Un regard dans: Internet Explorer 11 DevTools
Les outils de développement dans Internet Explorer (IE DevTools) ont longtemps manqué de plusieurs fonctionnalités critiques pour le débogage, le rendant presque inutile. Cela inclut l'impossibilité d'inspecter des éléments dans différents états tels que :hover :active :focus, et :visited - du moins pas de manière intuitive et facile. Longue h
Raccourcis clavier de capture d'écran pour Windows et macOS
Soit vous voulez discuter de quelque chose avec votre équipe, donner un guide de tutoriel sur un processus, ou simplement jeter des potins autour d'une conversation que vous aviez avec quelqu'un, les captures d'écran sont la meilleure façon de faire tout cela.Et quand vous voulez rapidement prendre et partager des captures d'écran, la meilleure façon de le faire est de raccourcis clavier. Les
