CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery

Apprendre à utiliser l'API Local Storage de HTML5

Retour à la formation
Chapitre 10 Leçon 2
Précédent
Suivant

Ce tutoriel explique comment utiliser l'API local storage de HTML5 pour sauvegarder et restaurer les préférences de style de l'utilisateur.

Détails de la leçon

Description de la leçon

Dans ce tutoriel, nous allons apprendre à utiliser l'API local storage de HTML5 pour stocker et récupérer les préférences de style de l'utilisateur. Nous commencerons par créer une interface simple où l'utilisateur pourra sélectionner des couleurs pour le titre (<h1>) et l'arrière-plan du <body>. Une fois les choix validés, ces préférences seront enregistrées dans le local storage. Nous verrons ensuite comment lire ces données et appliquer les styles sélectionnés lors du chargement de la page. Ce processus inclut la gestion d'événements avec jQuery pour rendre l'interface interactive et fonctionnelle. Enfin, nous verrons comment ajouter une fonctionnalité pour fermer l'interface après la sélection.


Les étapes suivantes sont couvertes :

  • Ouverture de la boîte de dialogue pour la sélection de style.
  • Récupération et stockage des valeurs.
  • Application des styles sélectionnés.
  • Récupération des préférences depuis le local storage.

Ce tutoriel est adapté aux débutants en développement web qui souhaitent comprendre l'utilisation de l'API local storage pour améliorer l'expérience utilisateur sur les sites web.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Apprendre à utiliser l'API local storage de HTML5.
  • Comprendre la manipulation du DOM avec jQuery.
  • Implémenter une fonctionnalité de sauvegarde des préférences utilisateur.
  • Créer une interface interactive pour la sélection de style.

Prérequis pour cette leçon

Pour suivre ce tutoriel, vous devez :

  • Connaître les bases de HTML et CSS.
  • Avoir des connaissances de base en JavaScript et jQuery.

Métiers concernés

Usages professionnels :

  • Développeurs web front-end cherchant à améliorer l'UX.
  • UX/UI designers souhaitant personnaliser les interfaces utilisateur.
  • Ingénieurs logiciels travaillant sur des applications web interactives.

Alternatives et ressources

Volitions alternatives :

  • Utilisation des cookies pour stocker des petites quantités de données.
  • Utilisation de frameworks comme React ou Vue.js qui offrent des solutions avancées pour la gestion des états et des préférences utilisateur.

Questions & Réponses

En attachant un événement click au bouton interface et en changeant la propriété CSS display de none à block pour rendre la boîte de dialogue visible.
Utiliser la méthode localStorage.setItem pour enregistrer les préférences de style sous un nom spécifique, par exemple styleApply.
En récupérant les valeurs avec localStorage.getItem, en les transformant en liste, puis en appliquant les styles au <h1> et au <body> avec css.