Le stockage local est un outil de développement Web utile qui permet aux développeurs d'enregistrer des données dans le navigateur de l'utilisateur. Dans cet article, nous examinerons différentes fonctionnalités du stockage local, en commençant par des exemples de niveau débutant et en passant à des techniques plus complexes. À la fin de ce guide, vous aurez une compréhension de base de la façon d'utiliser avec succès le stockage local dans les applications Web.

Exemples de niveau débutant sur le stockage local

1. Stockage des préférences utilisateur :

    Choose a theme:
    LightDarkMediumSave Preference

    

Lorsque l'utilisateur sélectionne un thème et clique sur le bouton « Enregistrer les préférences », ce code enregistre le thème sur la console. Pour lire ce journal, ouvrez les outils de développement du navigateur (généralement en appuyant sur F12 ou en cliquant avec le bouton droit sur la page et en sélectionnant « Inspecter ») et accédez à l'onglet de la console. (Lire la suite)

2. Mémorisation des entrées de l'utilisateur :

    Save Input

    

Cet exemple HTML génère une page Web simple qui permet aux utilisateurs de saisir du texte dans un champ de texte et de l'enregistrer dans le stockage local de leur navigateur.

Lorsqu'un utilisateur saisit du texte dans la zone de saisie et clique sur le bouton « Enregistrer la saisie », le texte est enregistré dans le stockage local du navigateur. Cela implique que même si les utilisateurs actualisent le site Web ou ferment et rouvrent le navigateur, les entrées enregistrées resteront accessibles. Le journal et l'alerte de la console informent l'utilisateur que sa saisie a été enregistrée avec succès. (En savoir plus)

3. Persistance du panier :

    
Shopping Cart
    

Cet exemple montre comment enregistrer un panier en utilisant le stockage local. Les articles ajoutés au panier sont enregistrés sous forme de tableau dans le stockage local sous la clé « panier ». Lorsque la page se charge, les éléments du panier enregistrés sont extraits du stockage local et affichés.

Lorsque vous cliquez sur l'un des boutons « Ajouter l'article X au panier », l'article approprié est ajouté au panier et le contenu du panier mis à jour est affiché dans la console. Pour inspecter ces journaux, ouvrez les outils de développement du navigateur (généralement en appuyant sur F12 ou en cliquant avec le bouton droit sur la page et en sélectionnant « Inspecter ») et accédez à l'onglet de la console.

Vous pouvez également afficher le stockage local directement via les outils de développement du navigateur. La plupart des navigateurs vous permettent de le faire en cliquant avec le bouton droit sur la page, en sélectionnant « Inspecter » pour obtenir les outils de développement, puis en accédant à l'onglet « Application » ou « Stockage ». À partir de là, développez la section « Stockage local » pour afficher les paires clé-valeur du site Web. Dans cet exemple, la clé « panier » inclut la chaîne JSON représentant les éléments du panier enregistrés.
Lire l'article complet - Maîtriser le stockage local dans le développement Web : 8 exemples pratiques, du novice à l'expert !

Apprenez Json - Cliquez ici