Partie 2 / Blogs / Perficient

Bienvenue dans la suite de notre voyage à travers les API Web cruciales ! Pour les nouveaux arrivants dans notre série, je recommande fortement de plonger dans la partie 1, accessible ici, où nous couvrons en détail les aspects fondamentaux de l’API Web Forms. Poursuivant notre voyage, approfondissons l’exploration des API Web essentielles, notamment Historique Web API et API de stockage Web. Avec le API d’historique Web permettant une navigation sans effort dans l’historique de navigation et l’API Web Storage fournissant des solutions de stockage flexibles via stockage local et stockage de sessionnous sommes prêts à découvrir leurs fonctionnalités en détail.

API d’historique Web

L’API d’historique Web englobe des méthodes et des propriétés qui permettent à JavaScript d’interagir avec la pile d’historique du navigateur. Il fournit aux développeurs des outils pour parcourir l’historique de navigation des utilisateurs, gérer l’historique des sessions et exécuter des opérations pertinentes pour la navigation dans les pages.

Explorons certaines des fonctions et propriétés clés ainsi que des exemples de code :

L’API d’historique Web englobe des méthodes et des propriétés qui permettent à JavaScript d’interagir avec la pile d’historique du navigateur. Il fournit aux développeurs des outils pour parcourir l’historique de navigation des utilisateurs, gérer l’historique des sessions et exécuter des opérations pertinentes pour la navigation dans les pages.

En substance, histoire.go() est une fonction cruciale de l’API Web History, permettant aux utilisateurs de parcourir leur historique de navigation par programme. Cette méthode, acceptant des entiers positifs ou négatifs comme arguments, facilite la navigation vers l’avant ou vers l’arrière selon le nombre de pages désigné, reflétant la fonctionnalité des commandes de navigation du navigateur.

En clairhistoire.forward() est une fonction de l’API Web History permettant aux utilisateurs d’avancer vers la page suivante de leur historique de navigation. Il imite l’action de cliquer sur le bouton Suivant dans le navigateur, facilitant une navigation transparente dans les pages visitées.

En termes simples, histoire.longueur est une propriété de l’API de l’historique Web représentant le nombre d’entrées dans la pile de l’historique de navigation. Chaque entrée correspond à une URL unique visitée par l’utilisateur lors de la session de navigation en cours.

Voici un exemple simple illustrant l’utilisation des fonctions et propriétés clés de l’API Historique Web :

HTML :

<button onclick="goBack()">Go Back</button>
<button onclick="goFunction()">Go Function</button>
<button onclick="checkHistoryLength()">Check History Length</button>
<button onclick="goForward()">Go Forward</button>

Javascript :

function goBack() {
  window.history.back();
}
function goFunction() {
  window.history.go(1); // Go forward one page
}
function checkHistoryLength() {
  let length = window.history.length;
  console.log("Number of pages in history:", length);
}
function goForward() {
  window.history.forward();
}

Dans le code JavaScript, quatre fonctions sont définies pour interagir avec l’API Web History :

1. retourner(): Lorsque le bouton associé clique, il appelle histoire.retour()en accédant à la page précédente de l’historique de navigation.
2. aller de l’avant(): Lorsque le bouton associé est cliqué, il appelle histoire.forward()en accédant à la page suivante de l’historique de navigation.
3. aller à la page(): Lorsque le bouton associé est cliqué, il appelle histoire.go(2)en parcourant deux pages vers l’avant dans l’historique de navigation.
4. displayHistoryLength() : Cette fonction récupère le nombre total de pages stockées dans la pile de l’historique de navigation à l’aide de ‘fenêtre.historique.longueur’ puis envoie ce décompte à la console pour référence.

Cet exemple montre comment JavaScript peut être utilisé pour créer des contrôles de navigation interactifs qui améliorent l’expérience utilisateur en tirant parti de l’API de l’historique Web.

API de stockage Web

L’API Web Storage dans les navigateurs Web permet aux développeurs de stocker des données localement. Il propose deux mécanismes principaux : stockage local et sessionStockagepermettant le stockage de paires clé-valeur.

• stockage local: Cette approche permet de stocker les données sans aucune expiration prédéfinie, garantissant ainsi leur persistance au fil des sessions du navigateur, y compris la fermeture et la réouverture.
• stockage de session : Ce mécanisme stocke les données pendant toute la durée de la session de page. Les données stockées sont effacées à la fin de la session de page, généralement lorsque l’utilisateur ferme l’onglet du navigateur.

Explorons certaines des méthodes et propriétés ainsi que des exemples de code :

setItem() :

En clair, setItem() est une fonction de l’API Web Storage qui permet de stocker des données directement dans le navigateur de l’utilisateur. Il enregistre les données dans des paires clé-valeur, chacune étant distincte et liée à une valeur particulière.

Voici un exemple démontrant l’utilisation de setItem() :

HTML :

<button onclick="saveData()">Save Data</button>

Javascript :

function saveData() {
    localStorage.setItem('username', 'John');
    console.log('Data saved successfully.');
}

Dans le code JavaScript fourni, le enregistrer des données() la fonction est définie. En cliquant sur le bouton désigné, la fonction est activée. Encapsulé dans le script est localStorage.setItem(‘nom d’utilisateur’, ‘Jean’)où la valeur ‘John’ est désigné pour la clé de stockage locale ‘nom d’utilisateur’. Cette fonctionnalité assure la conservation sécurisée des détails spécifiques à l’utilisateur, tels que les préférences ou les paramètres, garantissant leur accessibilité tout au long de la session de navigation. Tirant parti de la simplicité de JavaScript, les développeurs intègrent de manière transparente la fonctionnalité de stockage local, améliorant ainsi l’expérience utilisateur des applications Web.

Sortir:

obtenir l’article():

En clair, obtenir l’article() sert de fonction au sein de l’API Web Storage, permettant la récupération des données stockées localement dans le navigateur de l’utilisateur. Cette méthode donne accès à la valeur liée à une clé particulière définie précédemment via le setItem() méthode.

Voici un exemple simple démontrant l’utilisation de obtenir l’article():

HTML :

<button onclick="retrieveData()">Retrieve Data</button>

Javascript :

function retrieveData() {
    let username = localStorage.getItem('username');
    console.log('Username:', username);
}

Dans le code JavaScript fourni, le récupérer les données() la fonction est définie. Lors de l’activation du bouton désigné, la fonction est lancée. Dans ses limites, le scénario localStorage.getItem(‘nom d’utilisateur’) récupère la valeur liée au ‘nom d’utilisateur’ clé du stockage local du navigateur. Cette valeur récupérée est ensuite attribuée à la variable nom d’utilisateur, facilitant l’accès et l’affichage des données stockées. L’adaptabilité et la simplicité de JavaScript le rendent indispensable au développement Web, permettant aux développeurs de créer des applications Web résilientes et riches en fonctionnalités avec des capacités de stockage local.

Sortir:

clé(n):

En clair, clé(n) est une fonction de l’API Web Storage permettant de récupérer le nom de la clé hébergée à une position d’index désignée dans le stockage. Cette fonctionnalité facilite l’accès séquentiel aux noms de clés, en parcourant toutes les clés stockées dans le système de stockage du navigateur.

Voici un exemple simple démontrant l’utilisation de clé(n):

HTML :

<button onclick="displayKey()">Display Key</button>

Javascript :

function displayKey() {
  let keyName = localStorage.key(0);
  console.log("First key:", keyName);
}

Dans le code JavaScript fourni, le displayKey() la fonction est définie. En cliquant sur le bouton correspondant, cette fonction s’active. Dans le cadre de la fonction, localStorage.key(0) récupère l’identifiant de la clé stockée dans indice 0 dans le stockage local du navigateur. Par la suite, cette clé récupérée est affectée à la variable nomclé, facilitant son utilisation pour accéder et présenter la clé respective. Cette technique permet d’itérer sur toutes les clés stockées dans le stockage local, facilitant ainsi des actions adaptées à chacune. L’adaptabilité et la simplicité de JavaScript en font la pierre angulaire du développement Web, permettant aux développeurs de créer des applications Web dynamiques et attrayantes.

Sortir:

longueur:

La longueur est une propriété de l’API Web Storage qui fournit le nombre de paires clé-valeur hébergées dans le stockage du navigateur. Il fournit un moyen de vérifier le nombre total d’articles stockés, facilitant ainsi les itérations ou d’autres actions dépendantes de l’ampleur du stockage.

Par exemple, considérons cette illustration simple montrant l’application de la longueur :

HTML :

<button onclick="displayLength()">Display Length</button>

Javascript :

function displayLength() {
    let totalItems = localStorage.length;
    console.log('Total items:', totalItems);
}

Dans le code JavaScript fourni, le displayLength() la fonction est définie. En cliquant sur le bouton désigné, l’activation de cette fonction s’ensuit. Dans ses limites, localStorage.length récupère le nombre collectif de valeur clé paires archivées dans le stockage local du navigateur. Cette valeur résultante est ensuite allouée aux éléments totaux variables, facilitant ainsi l’évaluation de l’ampleur du stockage. La facilité d’utilisation et l’adaptabilité inhérentes de JavaScript en font un allié indispensable dans le domaine du développement Web, permettant aux créateurs de créer des expériences Web dynamiques et immersives dotées de fonctionnalités telles que le stockage local.

Sortir:

RemoveItem (nom clé) :

En clair, retirer l’objet() est une fonction de l’API Web Storage qui sert à éliminer un élément désigné valeur clé paire à partir du stockage du navigateur. Il fonctionne en acceptant le nom de la clé en entrée, puis en effaçant la valeur associée, supprimant ainsi efficacement l’élément du référentiel de stockage.

Voici un exemple simple démontrant l’utilisation de RemoveItem (nom clé) :

HTML :

<button onclick="removeData()">Remove Data</button>

Javascript :

function removeData() {
  localStorage.removeItem("username");
  console.log("Data removed successfully.");
}

Dans le code JavaScript fourni, le retirer l’objet() la fonction est définie. En cliquant sur le bouton désigné, l’activation de cette fonction s’ensuit. Dans son cadre, le script localStorage.removeItem(‘nom d’utilisateur’) entreprend la suppression du couple clé-valeur portant l’identifiant ‘nom d’utilisateur’ à partir du stockage local du navigateur. Cette action supprime efficacement l’élément, vous permettant de nettoyer les données inutiles stockées dans le navigateur. La simplicité et la polyvalence de JavaScript en font un outil fondamental pour le développement Web, permettant aux développeurs de créer des applications Web robustes et riches en fonctionnalités avec des fonctionnalités telles que la manipulation du stockage local.

Sortir:

clair():

En clair, clair() est une méthode au sein de l’API Web Storage qui permet la suppression globale de tous valeur clé paires hébergées dans le mécanisme de stockage du navigateur. Il efface efficacement l’intégralité du stockage, supprimant toutes les données qui y sont stockées.

Voici un exemple simple démontrant l’utilisation de clair():

HTML :

<button onclick="clearStorage()">Clear Storage</button>

Javascript :

function clearStorage() {
    localStorage.clear();
    console.log('Storage cleared successfully.');
}

Dans le code JavaScript fourni, le Effacer le stockage() la fonction est définie. Lorsque le bouton associé est cliqué, cette fonction est déclenchée. À l’intérieur de la fonction, localStorage.clear() supprime toutes les paires clé-valeur du stockage local du navigateur. Cette action efface efficacement l’intégralité du stockage, supprimant toutes les données qui y sont stockées. La polyvalence et la facilité d’utilisation de JavaScript le positionnent comme un atout essentiel dans le développement Web, offrant aux développeurs la possibilité de superviser efficacement le stockage du navigateur pour diverses applications, notamment la mise en cache, le contrôle de session et la gestion des préférences utilisateur.

Sortir:

Conclusion:

Dans cette partie, nous avons exploré les aspects fondamentaux des API Web JavaScript, en nous concentrant sur l’API Web History pour le contrôle de la navigation et l’API Web Storage pour le stockage de données locales. Ces API sont des outils essentiels pour créer des applications Web robustes et interactives. Restez à l’écoute pour la partie 3 où nous explorerons d’autres API Web cruciales. Cliquez sur ici pour lire la troisième partie.

Continuez à explorer et à innover avec JavaScript !