Le stockage local html5 revisité

Les plats clés

• Le stockage local HTML5, une partie de l'API de stockage Web, permet le stockage de données dans le navigateur, avec une capacité de 2 Mo à 10 Mo en fonction du navigateur, du protocole, du port et du domaine de niveau supérieur. Contrairement aux cookies, ces données ne sont pas renvoyées au serveur et persistent à travers les sessions et les redémarrages des appareils.
• Bien que le stockage local puisse avoir un coup de performance en raison de sa nature synchrone, il peut être plus rapide que le cache natif sur les appareils mobiles. Pour optimiser les performances, il est recommandé de limiter les lectures et d'accès uniquement au stockage local après la fenêtre.
Tous les navigateurs ne prennent pas en charge le réglage des éléments dans le stockage local en mode privé ou incognito, et dans certains cas, les données stockées en mode privé sont purgées après la sortie. Pour assurer une utilisation sûre du stockage local, il est conseillé non seulement de tester le soutien, mais aussi de la capacité d'obtenir et de définir des éléments.

Le stockage local fait partie de l'API de stockage Web HTML5 et vous permet de stocker des données dans le navigateur. Contrairement aux cookies, les données stockées à l'aide du stockage local ne sont pas renvoyées au serveur. Toutes les données restent sur le client et vous pouvez actuellement stocker de 2 Mo à 10 Mo. Cette limite est liée au navigateur spécifique, au protocole (HTTP ou HTTPS), au port et au domaine de niveau supérieur utilisé.

Dans cet article, nous discuterons de la façon d'utiliser cette API pour améliorer les performances d'un site Web. Je suppose que vous savez ce qu'est le stockage local et les méthodes exposées, mais si vous avez besoin d'un rafraîchissement, je vous suggère de lire l'article un aperçu de l'API de stockage Web par Colin Ihrig.

Espace disque disponible

Avant de commencer la discussion sur le stockage local, je veux vous donner un aperçu de l'espace disque disponible dans les principaux navigateurs mobiles et de bureau. Les tables suivantes sont basées sur l'article «Travailler avec le quota sur les navigateurs mobiles».

BROWNSEURS MOBILES:

navigateur chrome Android Browser Firefox iOS Safari Version 40 4.3 34 6-8 Espace disponible 10 Mo 2 Mo 10 Mo 5 Mo

navigateurs de bureau:

navigateur chrome opéra Firefox safari Internet Explorer Version 40 27 34 6-8 9-11 Espace disponible 10 Mo 10 Mo 10 Mo 5 Mo 10 Mo

Cache native vs stockage local

Lorsque vous utilisez le stockage local, vos données resteront sur le client et persisteront entre les sessions et les redémarrages des appareils. Comme je l'ai mentionné dans l'introduction, la limite de l'API de stockage locale est liée au navigateur spécifique (comme indiqué dans les tables précédentes), le protocole, le port et le domaine de niveau supérieur utilisé. En revanche, l'espace disponible sur le cache natif du navigateur est partagé sur les sites Web, et il est beaucoup plus petit sur les appareils mobiles. Il se fait fréquemment rincé, parfois même dans la même visite. Les appareils mobiles ont un problème supplémentaire: ils sont moins puissants que les appareils de bureau, donc atteindre de bonnes performances est un must.

Il y a eu beaucoup de discussions sur les performances de stockage locales. Par exemple, Christian Heilmann, anciennement avec Mozilla, a écrit «Il n'y a pas de solution simple pour le stockage local». Le stockage local peut avoir un coup de performance s'il n'est pas utilisé avec soin. La première chose que vous devez prendre en compte est qu'il s'agit d'une API synchrone, donc elle bloque le fil d'interface utilisateur principal. Le stockage local écrit et lit les données du disque dur, ce qui peut être une opération beaucoup plus coûteuse que la lecture de la mémoire. Afin de vous donner accès aux données, le stockage local doit lire les données du disque, et c'est là que le coup de performance se produit. Ce coup de performance n'est pas un problème majeur avec de petites quantités de données, mais il peut être perceptible en utilisant la limite de stockage complète.

En tant que bonne pratique, vous devriez essayer d'effectuer le moins de lectures possible. De plus, comme nous avons affaire à une API synchrone, vous devriez essayer de lire les données du stockage local uniquement après le licenciement de la fenêtre.

Les choses ont changé

mais les choses s'améliorent. Un article publié par Peter McLachlan de Mobify a expliqué que le stockage local peut être 5x plus rapidement que le cache natif sur les appareils mobiles.

Dans l'annexe du même article, vous pouvez voir l'évolution des performances du stockage local sur les navigateurs mobiles et combien il est amélioré. Vous pouvez également voir que le stockage local a toujours été plus rapide que le cache natif.

Qui utilise le stockage local?

Il existe certains cas récents de sites Web utilisant le stockage local pour mettre en cache des actifs, comme le Guardian qui utilise le stockage local pour le chemin critique CSS. Vous pouvez voir cette présentation donnée à la conférence Velocity 2014 pour mieux comprendre comment ils sont capables de le faire.

Smashing Magazine a également récemment commencé à mettre en cache des polices Web dans le stockage local. Dans cet article sur certaines améliorations des performances implémentées récemment sur leur site Web, ils signalent la différence des polices Web et les cachent dans le stockage local parmi les modifications qui ont conduit aux améliorations les plus efficaces.

Une note sur la navigation privée

Comme indiqué sur caniuse.com, sous les problèmes connus, lors de l'exécution en mode privé ou incognito, Safari, iOS Safari et Android ne prennent pas en charge la définition d'éléments dans le stockage local.

D'autres navigateurs tels que Chrome et Firefox vous permettent de stocker des données en stockage local en mode privé, mais les données sont purgées lorsque vous quittez le mode privé. Cela est dû à des problèmes de confidentialité, car quelqu'un pourrait utiliser les données persistantes pour en savoir plus sur les actions de l'utilisateur en mode privé.

Ce problème peut briser le comportement de votre demande si une valeur définie sous une session précédente devrait être là lors d'une visite ultérieure. Ainsi, pour utiliser le stockage local en toute sécurité, c'est une bonne pratique non seulement pour tester le support, mais aussi pour tester la capacité d'obtenir et de définir des éléments.

Pour plus d'informations sur le comportement de stockage local en mode privé et sur la façon de vérifier le contenu de stockage local dans différents navigateurs, vous pouvez utiliser l'article «N'oubliez pas de vérifier le mode de navigation privé lors du test» comme référence.

Conclusion

Il est peut-être temps que nous commencions à revisiter le stockage local et son utilisation potentielle, en particulier sur les appareils mobiles où nous pouvons l'utiliser pour éviter les goulots d'étranglement de latence. Nous pouvons commencer à réfléchir à de nouvelles façons de mettre en cache nos actifs, puis les servir instantanément à nos utilisateurs. Nous avons vu qu'il existe déjà des implémentations réussies de l'utilisation du stockage local de manière non conventionnelle.

Questions fréquemment posées (FAQ) sur le stockage local HTML5

Quelle est la limite de stockage maximale pour le stockage local HTML5?

La limite de stockage maximale pour le stockage local HTML5 varie à l'autre. Cependant, la plupart des navigateurs modernes offrent environ 5 Mo de stockage par domaine. Ceci est nettement plus grand que le 4KB (environ 4096 octets) offert par les cookies. Il est important de noter que ce stockage est par domaine, pas par objet de stockage local individuel.

La sécurité du stockage local HTML5?

Le stockage local HTML5 n'est pas conçu pour stocker des données sensibles. Contrairement aux cookies HTTP, les données stockées dans le stockage local ne sont pas renvoyées au serveur avec chaque demande HTTP. Cela signifie qu'il est moins vulnérable à certains types d'attaques, tels que les scripts croisés (XSS). Cependant, il est toujours sensible à d'autres types d'attaques, tels que les scripts inter-sites (XSS) et le contrefaçon de demande croisée (CSRF). Par conséquent, il est recommandé de ne pas stocker des informations sensibles comme les mots de passe ou les numéros de carte de crédit dans le stockage local.

Comment puis-je vérifier si un navigateur prend en charge le stockage local HTML5?

Vous pouvez vérifier si un navigateur prend en charge le stockage local HTML5 en utilisant l'opérateur «in» en JavaScript. Voici un extrait de code simple qui vérifie la prise en charge du stockage local:

if ('localStorage' dans Window && window ['localstorage']! == null) {
// Le stockage local est pris en charge
} else {
// Le stockage local n'est pas pris en charge
}

comment puis-je effacer les données du stockage local html5?

Vous pouvez effacer les données du stockage local HTML5 à l'aide de la méthode Clear (). Cette méthode supprime toutes les paires de valeurs clés du stockage local pour le domaine actuel. Voici un extrait de code simple:

localStorage.Clear ();

Stockage local HTML5. Cependant, le stockage local ne prend en charge que les paires de valeurs de clé de chaîne. Par conséquent, vous devez convertir votre objet ou votre tableau en une chaîne à l'aide de JSON.StRingify () avant de le stocker, et de le convertir en un objet ou un tableau à l'aide de JSON.Parse () lors de la récupération.

La différence entre le stockage local et le stockage de session?

La principale différence entre le stockage local et le stockage de session réside dans leur durée de vie et leur portée. Les données dans le stockage local persistent même lorsque le navigateur est fermé et rouvert, tandis que les données du stockage de session sont effacées lorsque la session de page se termine, c'est-à-dire lorsque le navigateur est fermé.

Comment puis-je itéré sur toutes les valeurs de la local dans la local local. Stockage?

Vous pouvez itérer toutes les valeurs du stockage local à l'aide d'une boucle simple pour la boucle en combinaison avec la méthode localStorage.key () et le localStorage.getItem () Méthode.

Le stockage local peut-il être partagé entre les sous-domaines?

Non, le stockage local ne peut pas être partagé entre les sous-domaines. Chaque sous-domaine a son propre stockage local séparé.

Les données de stockage locales peuvent-elles être transférées entre différents navigateurs?

Non, les données de stockage locales ne peuvent pas être transférées entre différents navigateurs. Chaque navigateur a son propre stockage local séparé.

Comment puis-je gérer les erreurs de quota de stockage locales?

Lorsque le quota de stockage local est dépassé, une exception de quota_exesed_err est lancée. Vous pouvez gérer cette exception en l'attrapant dans un bloc d'essai et en prenant des mesures appropriées, telles que l'effacement de l'espace ou la notification de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!