Cookies, stockage local et stockage de session

Ceci est l'article n°6 de la série de questions d'entretien Frontend. Si vous souhaitez améliorer votre préparation ou rester à jour en général, pensez à vous inscrire au Frontend Camp.

---

Les cookies, le stockage local et le stockage de session sont tous utilisés pour stocker des données côté client. Ces mécanismes sont particulièrement utiles pour stocker des jetons d'authentification ou des états réservés aux clients, tels que des thèmes ou des paramètres personnalisés. Les trois types de stockage partagent les caractéristiques suivantes :

1. Ils stockent les données sous forme de paires clé-valeur.
2. Toutes les valeurs sont stockées au format chaîne. Si une valeur n'est pas une chaîne, elle est sérialisée avant d'être stockée.
3. Les données stockées dans ces mécanismes sont accessibles au client (sauf les cookies HttpOnly).

Cookies

Les cookies ne peuvent pas stocker de grandes quantités de données ; leur stockage est plafonné à environ 4 Ko par domaine. Cette limitation existe car les cookies sont automatiquement envoyés au serveur à chaque demande effectuée par le navigateur. Le stockage excessif de données côté client dans des cookies augmenterait la taille de la charge utile, ce qui aurait un impact négatif sur les performances.

Quels types de données devons-nous stocker dans les cookies ?
Les cookies sont idéaux pour stocker les données qui doivent être transmises au serveur, telles que les jetons d'authentification, les identifiants de session, les identifiants d'analyse et des informations similaires. De plus, les cookies permettent le partage de données entre différents onglets ou fenêtres du même domaine ou sous-domaine.

Vous pouvez configurer les cookies à l'aide de différents indicateurs pour modifier leur comportement ou renforcer la sécurité :

• HttpOnly garantit que les cookies sont inaccessibles via JavaScript côté client, atténuant ainsi le risque d'attaques XSS.
• maxAge/expires spécifie une date d'expiration pour le cookie. Si aucune date d'expiration n'est fixée, le cookie est supprimé à la fermeture du navigateur.

Vous voulez en savoir plus sur les indicateurs de cookies ? Consultez ma publication LinkedIn.

Contrairement au stockage local et au stockage de session, les cookies peuvent également être définis (lire : "ajoutés") par le serveur à l'aide de l'en-tête Set-Cookie.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

Stockage local

Contrairement aux cookies, localStorage offre une capacité de stockage nettement plus grande d'environ 5 Mo par domaine. En effet, localStorage est conçu pour stocker des données à long terme. Il conserve les données même lorsque le navigateur est fermé, ce qui le rend idéal pour les besoins de stockage persistants côté client.

Quel type de données devrions-nous alors stocker dans localStorage ?
localStorage est le mieux adapté pour stocker des données utilisées uniquement côté client et qui n'ont pas besoin d'être envoyées au serveur à chaque demande. Quelques exemples sont le thème d'un site Web ou de produits ajoutés au panier avant qu'un utilisateur ne se connecte.

Les données stockées dans localStorage persistent indéfiniment jusqu'à ce que l'utilisateur les supprime manuellement ou que le site Web les efface à l'aide de JavaScript.

Semblable aux cookies, les données de localStorage sont accessibles dans tous les onglets ou fenêtres de la même origine, ce qui les rend utiles pour partager l'état côté client au sein d'un domaine.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

Stockage des sessions

sessionStorage est utilisé pour stocker des données de courte durée côté client. Comme localStorage, il offre une capacité de stockage d'environ 5 Mo par domaine et partage la même API.

Bien que sessionStorage et localStorage partagent des fonctionnalités similaires, ils diffèrent sur deux aspects clés : Persistance des données et Accessibilité.
Contrairement à localStorage, sessionStorage ne conserve pas les données une fois l'onglet ou le navigateur fermé. De plus, les données stockées dans sessionStorage sont isolées dans l'onglet ou la fenêtre spécifique dans lequel elles ont été créées, ce qui signifie que les autres onglets ou fenêtres de la même origine ne peuvent pas y accéder.

Quel est alors le cas d’utilisation de sessionStorage ?
sessionStorage est idéal pour stocker les données nécessaires uniquement pour une seule session. Par exemple, imaginez qu’un utilisateur remplisse un long formulaire et actualise accidentellement la page. Si les données du formulaire sont stockées dans sessionStorage, elles persisteront jusqu'à l'actualisation, permettant à l'utilisateur de continuer sans perdre sa progression.

Cependant, il est important de noter que ces données ne seront pas accessibles dans un autre onglet ou une fois l'onglet fermé.

// Set a value in localStorage.
localStorage.setItem('theme', 'dark');

// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'

// Remove a value from localStorage.
localStorage.removeItem('theme');

// Clear all data in localStorage.
localStorage.clear();

Bien que les cookies soient automatiquement inclus dans chaque requête envoyée par le navigateur, les données stockées dans localStorage ou sessionStorage peuvent être transmises manuellement au serveur en écrivant du code personnalisé.

---

Résumé

1. Les cookies, localStorage et sessionStorage sont utilisés pour stocker des données côté client.
2. Les cookies sont la seule forme de stockage qui peut également être définie par le serveur à l'aide de l'en-tête de réponse Set-Cookie.
3. Les cookies sont automatiquement envoyés au serveur à chaque demande.
4. localStorage et sessionStorage ont un stockage considérablement important (5 Mo) par rapport aux cookies (4 Ko). Ces deux stockages partagent la même interface API.
5. Les cookies ont une date d'expiration, sinon ils sont effacés à la fermeture du navigateur.
6. Les données localStorage persistent indéfiniment à moins qu'elles ne soient effacées manuellement par l'utilisateur ou le site Web lui-même.
7. Les données de sessionStorage sont effacées après la fin de la session, c'est-à-dire lorsque l'onglet ou la fenêtre est fermé.

---

Vous aimez ce que vous venez de lire ? Pensez à consulter Frontend Camp ✌️

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!