Le stockage côté client est essentiel pour les applications Web. Il n'est peut-être pas aussi résistant que le stockage côté serveur, mais sans lui, les applications Web ne pourraient pas implémenter de nombreuses fonctionnalités modernes. Toutes sortes de fonctionnalités dépendent du stockage côté client, des sessions de jeux aux paniers d'achat sur les sites de commerce électronique.

Le stockage côté client permet également aux applications Web de mettre en œuvre une architecture centrée sur la confidentialité. Vous pouvez l'utiliser pour vous assurer que les données sensibles ne quittent jamais l'appareil d'un utilisateur.

Qu'est-ce que le stockage côté client ?

Dans le développement Web, le stockage côté client fait référence aux différentes façons dont les navigateurs Web peuvent stocker des données. Une application peut ensuite utiliser ces données pour fournir des fonctionnalités aux utilisateurs. Le stockage côté client est essentiel pour plusieurs raisons :

  • L'accès aux données stockées sur le client est beaucoup plus rapide et votre application peut y accéder sans Internet.
    • instagram viewer
  • Le stockage côté client permet à votre application de se souvenir plus facilement des préférences de chaque utilisateur.
  • Le stockage permanent de certaines données sur le client facilite la protection de la vie privée des utilisateurs.
  • Le stockage de toutes les données d'application sur le serveur est coûteux, en particulier à grande échelle.

Il existe différentes formes de stockage côté client que vous pouvez utiliser dans vos applications Web.

Biscuits

Un cookie de navigateur est un élément de données clé/valeur stocké sous forme de chaîne sur votre ordinateur. Les navigateurs envoient tous les cookies d'un site particulier au serveur du site à chaque demande. Les cookies ont été le premier (et pendant un certain temps, le seul) type de stockage côté client.

Il n'y a pas de limite officielle sur la taille d'un cookie, mais les navigateurs individuels imposent des limites variables sur la taille et le nombre de cookies que vous pouvez définir. La RFC 6265 Section 6.1 indique les capacités minimales suivantes en matière de cookies que les navigateurs (agents utilisateurs) doivent fournir :

Les implémentations pratiques des agents utilisateurs ont des limites sur le nombre et la taille des cookies qu'ils peuvent stocker. Les agents utilisateurs à usage général DEVRAIENT fournir chacune des capacités minimales suivantes :

  • Au moins 4096 octets par cookie (mesuré par la somme de la longueur du nom, de la valeur et des attributs du cookie).
  • Au moins 50 cookies par domaine.
  • Au moins 3000 cookies au total.

Les cookies peuvent rester sur le navigateur pendant des durées variables. Certains expirent à la fin d'une session de page, et certains ont des dates d'expiration arbitraires qui peuvent s'étendre jusqu'à des mois dans le futur.

Les navigateurs créent une session de page lorsque vous ouvrez un nouvel onglet et la terminent lorsque vous fermez l'onglet ou le navigateur. Si vous rechargez ou actualisez la page, le navigateur ne mettra pas fin à la session de la page.

Cas d'utilisation des cookies

Les cookies sont les mieux adaptés pour stocker de petits éléments de données que le serveur doit fréquemment lire ou modifier. Pourquoi?

  • Les cookies sont automatiquement joints à toutes les requêtes du réseau
  • Les cookies ne peuvent stocker que de petites quantités de données de chaîne.

Vous pouvez utiliser des cookies pour identifier un utilisateur (comme un identifiant de session), enregistrer une visite de page à des fins de création de signets ou stocker le meilleur score d'un jeu.

Stockage local

Comme un cookie, localStorage est un magasin clé/valeur qui stocke des données de chaîne. Bien que les deux types de stockage soient similaires, localStorage et les cookies diffèrent de plusieurs manières :

  • LocalStorage dépend de JavaScript.
  • Les données dans localStorage résident principalement sur le navigateur. Vous devez délibérément l'envoyer au serveur, au lieu que le navigateur l'envoie à chaque requête.
  • LocalStorage n'a pas de date d'expiration. Il persiste sur le client jusqu'à ce qu'un développeur le supprime avec JavaScript ou que l'utilisateur efface le stockage de son navigateur.
  • LocalStorage a une capacité de stockage beaucoup plus grande. La Spécification WHATWG ne spécifie pas de limite stricte mais, selon Wikipédia, la taille minimale de localStorage parmi les principaux navigateurs est de 5 Mo:

Les navigateurs limitent les cookies à 4 kilo-octets. Le stockage Web offre une capacité de stockage bien supérieure :

  • Opera 10.50+ autorise 5 Mo
  • Safari 8 autorise 5 Mo
  • Firefox 34 autorise 10 Mo
  • Google Chrome autorise 10 Mo par origine
  • Internet Explorer autorise 10 Mo par zone de stockage

Cas d'utilisation de LocalStorage

LocalStorage est parfait pour stocker une grande quantité de données que le serveur a rarement besoin de référencer. Il peut s'agir des paramètres utilisateur d'une application, des détails de configuration du thème ou des données d'un formulaire récemment rempli. En effet, localStorage a une limite de stockage beaucoup plus importante que les cookies, mais vous devez faire des efforts supplémentaires pour envoyer ses données au serveur.

Si vous stockez les données au format JSON, vous pouvez stocker des données raisonnablement complexes à l'aide de localStorage, même s'il ne peut stocker que des chaînes.

LocalStorage est vulnérable à Attaques XSS, vous ne devez donc pas y stocker de données client sensibles.

Stockage de session

SessionStorage est un magasin clé/valeur qui fonctionne presque le même que localStorage, sauf pour une chose. Les données stockées ne persistent que pendant la durée d'une session de page.

Cas d'utilisation de SessionStorage

Vous pouvez utiliser SessionStorage pour stocker le même type de données que localStorage, mais uniquement lorsque les données n'ont pas besoin de persister au-delà d'une session de page.

IndexedDB

IndexedDB est une puissante API de navigateur pour stocker de grandes quantités de données structurées. Il s'agit d'une base de données transactionnelle orientée objet qui stocke les données dans des paires clé/valeur.

Si vous avez affaire à de plus petites quantités de données, localStorage/sessionStorage est le meilleur choix, plus facile. Malheureusement, ils sont limités par leur capacité de stockage et le fait qu'ils ne peuvent stocker que des données de chaîne. IndexedDB permet non seulement de stocker différents types de données, y compris des fichiers/données binaires, mais il peut également stocker beaucoup plus de données. IndexedDB construit également des index de son contenu pour permettre une recherche rapide de la base de données.

Cas d'utilisation pour IndexedDB

IndexedDB est essentiellement une base de données NoSQL dans le navigateur et peut stocker de très grandes quantités de données. Tout cas d'utilisation qui nécessite de stocker plus de 10 Mo de données est approprié pour IndexedDB.

Contrairement aux autres formes de stockage de navigateur, IndexedDB ne se limite pas au stockage de chaînes. IndexedDB peut stocker des données de tous les types JavaScript standard. Si vous créez une application Web pour travailler principalement hors ligne, vous pouvez utiliser IndexedDB pour stocker toutes les données de l'application.

Le stockage côté client est flexible et puissant

Le terme stockage côté client fait référence au stockage des données d'application dans le navigateur. Le stockage côté client est essentiel au fonctionnement de la plupart des applications Web modernes. Il existe différents types de stockage côté client: cookies, local/sessionStorage et IndexedDB.

Tous les types de stockage de navigateur ont des limites variables sur leur capacité et le type de données qu'ils peuvent stocker. Les cookies sont le type le plus limité, local/sessionStorage est le plus pratique et IndexedDB est le plus puissant.