L’API localStorage est une fonctionnalité fournie par les navigateurs web qui permet aux développeurs web de stocker des données localement dans le navigateur d’un utilisateur. Cette API permet de stocker des paires clé-valeur de manière persistante sur l’ordinateur de l’utilisateur, ce qui signifie que même si l’utilisateur ferme et réouvre son navigateur, les données seront toujours disponibles.
Concrètement, cela signifie que les développeurs peuvent stocker des informations telles que des préférences utilisateur, des paramètres de configuration ou d’autres données nécessaires à l’application directement dans le navigateur de l’utilisateur, sans avoir besoin de recourir à un serveur distant.
L’API localStorage, c’est quoi ?
L’API localStorage est comme une boîte de rangement dans le navigateur web où vous pouvez mettre des petits morceaux de données. Ces données restent dans cette boîte même lorsque vous fermez la page web ou même le navigateur. Cela signifie que lorsque vous revenez sur la même page plus tard, ces données sont toujours là, attendant d’être utilisées.
Comment fonctionne l’API localStorage
L’utilisation de l’API localStorage est relativement simple. Elle offre des méthodes telles que setItem() pour stocker une paire clé-valeur, getItem() pour récupérer la valeur associée à une clé, removeItem() pour supprimer une paire clé-valeur et clear() pour effacer toutes les données stockées.
Stocker des données
Pour stocker des données, vous pouvez utiliser la méthode setItem() pour stocker des données dans localStorage. Vous fournissez une clé et une valeur à stocker :
localStorage.setItem('clé', 'valeur');
Récupérer des données
Pour récupérer des données, vous pouvez utiliser la méthode getItem() pour récupérer des données depuis localStorage. Vous fournissez la clé pour les données que vous souhaitez récupérer :
const valeur = localStorage.getItem('clé');
Supprimer des données
Pour supprimer des données, vous pouvez utiliser la méthode removeItem() pour supprimer des données de localStorage. Vous fournissez la clé de l’élément que vous souhaitez supprimer :
localStorage.removeItem('clé');
Effacer toutes les données
Pour effacer toutes les données, vous pouvez utiliser la méthode clear() pour effacer toutes les données stockées dans localStorage :
localStorage.clear();
Vérifier si les données existent
Pour vérifier si un élément existe, vous pouvez vérifier si un élément existe dans localStorage en utilisant getItem() et en vérifiant si la valeur retournée est null :
const valeur = localStorage.getItem('clé');
if (valeur !== null) {
// L'élément existe
} else {
// L'élément n'existe pas
}
Exemple complet
// Stocker des données
localStorage.setItem('nom_utilisateur', 'Jean');
// Récupérer des données
const nom_utilisateur = localStorage.getItem('nom_utilisateur');
console.log(nom_utilisateur); // Sortie : Jean
// Supprimer des données
localStorage.removeItem('nom_utilisateur');
Stocker un objet sous forme de chaîne JSON
L’API localStorage stocke les données sous forme de chaînes de caractères. Cela signifie que lorsque vous utilisez localStorage.setItem('key', 'value'), la valeur value est automatiquement convertie en une chaîne de caractères, même si elle est de type objet ou autre.
Si vous souhaitez stocker des objets JavaScript complexes dans le localStorage, vous devez d’abord les convertir en chaînes de caractères à l’aide de la méthode JSON.stringify() pour les stocker, puis les reconvertir en objets JavaScript à l’aide de JSON.parse() lorsque vous les récupérez. Cette conversion vers et depuis JSON est souvent utilisée pour stocker des données structurées dans le localStorage.
// Stocker un objet sous forme de chaîne JSON
const user = { name: 'Jean', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
// Récupérer l'objet à partir de la chaîne JSON
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // Output: { name: 'Jean', age: 30 }
L’API localStorage est-elle uniquement accessible en Javascript ?
Les données stockées dans l’API localStorage sont principalement accessibles depuis JavaScript, car localStorage est une fonctionnalité du navigateur web et ne peut être utilisée que dans le contexte du navigateur. Cela signifie que vous pouvez stocker des données dans localStorage en utilisant JavaScript et les récupérer ultérieurement dans la même page web en utilisant JavaScript.
En revanche, vous ne pouvez pas accéder directement aux données stockées dans l’API localStorage côté serveur (par exemple, avec PHP, Python, Node.js, etc.). Ces données sont limitées au navigateur de l’utilisateur et ne sont pas envoyées avec les requêtes HTTP vers le serveur. Si vous avez besoin d’accéder à ces données côté serveur, vous devrez généralement les envoyer au serveur via une requête HTTP (par exemple, en utilisant AJAX) ou en utilisant d’autres mécanismes comme les cookies ou les sessions.
Les données stockées avec l’API localStorage sont accessibles depuis n’importe quel site web ?
Les données stockées dans l’API localStorage sont spécifiques à un domaine ou à un site web particulier. Cela signifie que les données stockées dans localStorage par un site web ne sont pas directement accessibles par un autre site web. Cette restriction est liée à la politique du même origine (Same Origin Policy) appliquée par les navigateurs web pour des raisons de sécurité.
Ainsi, les données stockées dans l’API localStorage sont isolées et sécurisées par rapport à d’autres sites web. Cela garantit que les données sensibles d’un site web ne sont pas accessibles ou modifiées par d’autres sites web, ce qui contribue à renforcer la sécurité des utilisateurs.
Quelle est la différence entre les cookies et l’API localStorage ?
Les données stockées dans l’API localStorage ne sont pas stockées comme des cookies. Les cookies et localStorage sont deux mécanismes de stockage différents disponibles dans les navigateurs web, chacun ayant ses propres caractéristiques et cas d’utilisation.
Les cookies sont envoyés avec chaque requête HTTP vers le même domaine où ils ont été définis, ce qui signifie qu’ils sont limités par le domaine et peuvent être accessibles côté serveur. L’API localStorage est limitée au navigateur de l’utilisateur et est accessible uniquement du côté client (côté navigateur). Les données stockées dans localStorage ne sont pas automatiquement envoyées avec chaque requête HTTP.
Taille : Les cookies ont une limite de taille beaucoup plus petite par rapport à localStorage. Les cookies ont généralement une limite de 4KB par cookie et un total de 20 cookies par domaine tandis que l’API localStorage a une limite de stockage beaucoup plus élevée, généralement de plusieurs mégaoctets (5 à 10 Mo) par domaine, bien que cette limite puisse varier en fonction du navigateur et du système.
Durée de vie : Les cookies peuvent avoir une durée de vie définie, après laquelle ils expirent et sont automatiquement supprimés du navigateur. Les données stockées dans localStorage restent tant que l’utilisateur ne les supprime pas manuellement ou que le site web ne les efface pas.
Transmission : Les cookies sont automatiquement envoyés avec chaque requête HTTP vers le même domaine, ce qui peut augmenter la taille des requêtes. Les données localStorage ne sont pas automatiquement envoyées avec les requêtes HTTP, ce qui peut réduire le trafic réseau.
Exemples concrets d’utilisation
Voici quelques exemples concrets de leur utilisation :
Stockage de préférences utilisateur : Les sites web peuvent utiliser l’API localStorage pour stocker les préférences utilisateur telles que le thème préféré, les paramètres de langue, les préférences de mise en page,… Cela permet aux utilisateurs de personnaliser leur expérience sur le site et de retrouver leurs préférences lors de visites ultérieures.
Mémorisation de sessions utilisateur : Les données de session, telles que les identifiants de session ou les jetons d’authentification, peuvent être stockées dans localStorage pour permettre aux utilisateurs de rester connectés entre les sessions de navigation sans avoir à se reconnecter à chaque visite sur le site.
Cache de données temporaire : localStorage peut être utilisé comme cache local pour stocker temporairement des données fréquemment utilisées ou des données qui ne changent pas souvent, ce qui permet d’accélérer le chargement des pages en évitant de recharger les mêmes données à chaque visite.
Stockage de panier d’achats : Les sites de commerce électronique peuvent utiliser l’API localStorage pour stocker temporairement les articles ajoutés au panier d’achats, ce qui permet aux utilisateurs de naviguer sur d’autres pages du site tout en conservant les articles dans leur panier.
Suivi de progression et d’état : Les applications web peuvent utiliser localStorage pour suivre la progression de l’utilisateur dans une tâche ou pour enregistrer l’état de l’application, ce qui permet aux utilisateurs de reprendre là où ils se sont arrêtés lors de leur prochaine visite.
Stockage de données locales hors ligne : Les applications web progressives (PWA) peuvent utiliser localStorage pour stocker des données localement sur l’appareil de l’utilisateur afin de fournir une expérience hors ligne, même lorsque l’appareil n’est pas connecté à Internet.
Les limites de l’API localStorage
Bien que l’API localStorage soit un outil utile pour stocker des données localement dans le navigateur d’un utilisateur, elle présente également quelques inconvénients ou désavantages :
Limitation de taille : La capacité de stockage de l’API localStorage varie d’un navigateur à l’autre.
Type de stockage : L’API localStorage ne peut stocker que des données sous forme de chaînes de caractères.
Non sécurisé : Comme les données stockées dans localStorage sont stockées en clair dans le navigateur de l’utilisateur, elles ne sont pas sécurisées contre les accès malveillants ou les fuites de données.
Dépendance au navigateur : Pour récupérer ses données, l’utilisateur devra utiliser toujours le même navigateur sur la même machine.
L’API localStorage est une fonctionnalité des navigateurs web qui permet aux développeurs de stocker des données localement dans le navigateur de l’utilisateur. Elle utilise une structure simple de paires clé-valeur et offre des méthodes pour stocker, récupérer, modifier et supprimer des données de manière persistante. Bien qu’elle soit utile pour stocker des préférences utilisateur, des données de session et d’autres informations côté client, elle présente des limites telles que la taille maximale de stockage, la restriction aux chaînes de caractères et des considérations de sécurité pour le stockage de données sensibles.
