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.

45 Propres et beaux thèmes WordPress minimalistes

Design vibrant et complexe n'est certainement pas la tasse de thé de tout le monde. Certains d'entre nous peuvent préférer que ce soit propre, simple et direct. Dans un autre mot - minimaliste. Vous vous demandez probablement, propre et simple, comment peut-il être difficile? Mais la vérité est - nettoie et simple ne les rend pas plus faciles à concevoir. En fa

(Conseils techniques et de conception)

30 Fonds d'écran Adorable Halloween Mobile à télécharger

Vous cherchez des fonds d'écran Halloween pour hanter vos écrans à la fin du mois d'octobre? Eh bien, tant pis parce que nous n'avons que des fonds d'écran d'Halloween adorables à partager avec vous cette fois.Trouvez des goules mignonnes, des chats noirs, des chauves-souris aux grands yeux, des toiles d'araignées douillettes, des crânes et des squelettes souriants, des sorcières, des hiboux, des momies, des monstres et plus encore. Amélio

(Conseils techniques et de conception)