Comment gérer le stockage de données hors ligne à l’aide de l’API localForage

Découvrez comment localForage peut faire passer localStorage à un niveau supérieur pour offrir une expérience utilisateur fluide et personnalisée.

Souhaitez-vous parfois que vos sites Web préférés se souviennent de vos informations de connexion ou que votre application de liste de tâches se synchronise lorsque vous changez d’appareil ? Bien que localStorage, une fonctionnalité essentielle du navigateur, offre une solution à ces problèmes, il présente des limites. localForage fait passer localStorage au niveau supérieur, en aidant les développeurs à créer des applications Web qui offrent une expérience utilisateur fluide et personnalisée.

Bien que localStorage permette aux applications Web de stocker des données localement sur l’appareil d’un utilisateur, comme indiqué précédemment, il présente néanmoins des limites. Par exemple, il stocke uniquement les données sous forme de chaînes, ce qui oblige le développeur à franchir des étapes de conversion pour des structures de données complexes telles que des objets ou des tableaux. De plus, ses opérations synchrones peuvent ralentir votre application en bloquant le thread principal lors de l’accès aux données.

De plus, la plupart des navigateurs limitent localStorage à 5 Mo par domaine (origine). Cela peut constituer une limitation importante pour les applications qui doivent stocker une grande quantité de données localement. C’est là qu’intervient localForage, offrant une solution plus avancée et plus riche en fonctionnalités pour gérer le stockage local.

Concernant l’espace de stockage, localForage utilise IndexedDB, une API de navigateur qui offre une solution de stockage plus robuste que localStorage. IndexedDB, en théorie, offre des capacités de stockage bien plus importantes, dépassant souvent plusieurs gigaoctets selon le navigateur et l’appareil. Attachez votre ceinture pendant que nous explorons les possibilités de localForage, explorant ses capacités et comment il peut transformer vos applications Web !

Principales fonctionnalités de localForage

Examinons certaines des fonctionnalités clés de localForage et explorons comment elles aident les développeurs à créer des applications Web exceptionnelles :

• API asynchrone (promesses) : localForage utilise des promesses pour gérer les opérations de données asynchrones. Cela évite de bloquer le thread principal, ce qui conduit à des expériences utilisateur plus fluides et à une meilleure réactivité des applications.
• Prise en charge de différents types de données : localForage stocke et récupère de manière transparente des objets, des tableaux, des blobs et d’autres objets JavaScript natifs. Cela élimine le besoin de sérialisation et de désérialisation manuelles, simplifiant ainsi la gestion des données.
• Flexibilité du back-end de stockage : localForage sélectionne intelligemment le backend de stockage le plus approprié en fonction des capacités du navigateur. Il donne la priorité à IndexedDB en raison de ses capacités de stockage plus élevées et de sa prise en charge du stockage d’objets et revient à WebSQL ou localStorage si nécessaire. Cela offre des performances et une compatibilité optimales entre différents navigateurs.
• Mécanisme de repli : Si les backends de stockage avancés tels que IndexedDB ne sont pas disponibles, localForage gère cela en douceur. Il passe sans effort à localStorage, de sorte que les données restent intactes même dans les navigateurs plus anciens.

Premiers pas avec localForage

localForage est facile à intégrer dans vos projets web. Voici comment commencer :

Installation

• Réseau canadien : Incluez la bibliothèque localForage directement dans votre HTML à l’aide d’un lien CDN.

<script src="https://cdn.jsdelivr.net/npm/localforage@1.9.0/dist/localforage.min.js"></script>.

• Gestionnaires de paquets : Installez localForage en utilisant npm npm install localforage ou du fil yarn add localforage. Ensuite, importez-le dans votre code JavaScript en utilisant :

const localforage = require('localforage');.

Utilisation de base

Si vous connaissez déjà les bases de localStorage, alors localForage vous semblera être une mise à niveau confortable. localForage propose une syntaxe similaire pour définir, obtenir et supprimer des données à l’aide de méthodes telles que setItem, getItem et removeItem. La principale différence réside dans les types de données et les opérations.

• Sauvegarde des données avec setItem : Utilisez le setItem méthode pour stocker des données sous une clé spécifique. localForage’s setItem La méthode vous permet de conserver les données localement sur l’appareil d’un utilisateur. Ces données sont stockées hors ligne, ce qui signifie qu’elles sont disponibles même sans connexion Internet. Cette méthode prend en charge un large éventail de types d’objets JavaScript pour le stockage, tels que des chaînes, des nombres, des blobs, des objets simples, des tableaux et plusieurs tableaux typés comme Float32Array et Uint8ClampedArray. Il est important de noter que lors de l’utilisation des backends localStorage et WebSQL, les données binaires seront sérialisées avant d’être enregistrées et récupérées. Cela entraînera une augmentation de taille lors de la sauvegarde des données binaires.

localforage
  .setItem("username", "johndoe")
  .then(() => console.log("Data saved successfully!"))
  .catch((error) => console.error("Error saving data:", error));

• Récupération de données avec getItem : Utilisez le getItem méthode pour récupérer les données associées à une clé comme indiqué dans l’exemple ci-dessous :

localforage
  .getItem("username")
  .then((username) => console.log("Retrieved username:", username))
  .catch((error) => console.error("Error retrieving data:", error));

• Supprimer des données avec RemoveItem: Utilisez le removeItem méthode pour supprimer les données stockées sous une clé :

localforage
  .removeItem("username")
  .then(() => console.log("Data removed successfully!"))
  .catch((error) => console.error("Error removing data:", error));

Utilisation avancée de localForage

Nous avons exploré les principes fondamentaux de localForage et vu en quoi il constitue une nette amélioration par rapport au localStorage traditionnel. Cependant, le véritable potentiel de localForage va au-delà des fonctionnalités de base. Imaginez une boîte à outils regorgeant d’outils puissants qui ne demandent qu’à être utilisés.

Cette section sera votre guide pour débloquer ces fonctionnalités avancées. Nous explorerons comment stocker et récupérer facilement des structures de données complexes, maîtriser les opérations asynchrones pour une expérience utilisateur fluide et explorer des fonctionnalités supplémentaires telles que la gestion des clés et des événements.

• Structures de données complexes : Le processus permet de stocker et de récupérer directement des objets et des tableaux, éliminant ainsi le besoin de conversion manuelle de chaînes avec JSON.stringifycomme vous l’utiliseriez avec l’API localStorage traditionnelle.

const user = { name: "Jane Doe", email: "jane.doe@example.com" };
localforage.setItem("user", user);

• Fonctionnalités asynchrones avec promesses : localForage adopte les opérations asynchrones, un concept clé du développement Web moderne. Cela signifie que l’accès aux données ne bloque pas le thread principal, ce qui permet à votre application de fonctionner correctement et de rester réactive. La question est : comment gérer efficacement ces tâches asynchrones ? Des promesses !

localforage
  .getItem("user")
  .then((user) => {
    console.log("Welcome back,", user.name);
    return localforage.setItem("lastLogin", new Date());
  })
  .then(() => console.log("Login timestamp updated!"))
  .catch((error) => console.error("Error:", error));

Dans l’extrait de code ci-dessus, nous pouvons voir comment enchaîner plusieurs opérations localForage asynchrones à l’aide de promesses. Il récupère un objet utilisateur en utilisant getItempuis accueille l’utilisateur par son nom.

Voici le problème : cela ne s’arrête pas là. Il enchaîne une autre opération asynchrone en utilisant .then pour mettre à jour l’horodatage de la dernière connexion de l’utilisateur avec la date actuelle en utilisant setItem. Enfin, les promesses fournissent un catch block pour gérer les erreurs potentielles lors de ces opérations.

• Récupération des clés stockées : Parfois, vous aurez peut-être besoin d’une image complète des données stockées dans localForage. Dans de tels cas, le keys() la méthode est pratique. Il récupère une promesse qui se résout avec un tableau contenant toutes les clés actuellement dans localStorage.

localforage
  .keys()
  .then((keys) => {
    console.log("Available keys:", keys);
    
  })
  .catch((error) => console.error("Error retrieving keys:", error));

L’extrait de code ci-dessus montre comment utiliser le keys() méthode. Il récupère un tableau de toutes les clés et les enregistre sur la console. Vous pouvez ensuite utiliser ces clés à diverses fins, telles que parcourir les données stockées ou supprimer des entrées spécifiques.

• Effacement du stockage local : Il peut y avoir des scénarios dans lesquels vous devez effacer complètement les données stockées à l’aide de localForage. Le clear() La méthode fournit un moyen pratique de le faire.

localforage
  .clear()
  .then(() => console.log("Local storage cleared successfully!"))
  .catch((error) => console.error("Error clearing local storage:", error));

Cet extrait de code montre comment utiliser le clear() méthode. Il efface toutes les données stockées dans localStorage et enregistre un message de réussite une fois terminé. N’oubliez pas d’utiliser cette méthode avec prudence, car elle supprime définitivement toutes les données stockées et est irréversible.

• Écoute des événements avec localForage : localForage vous permet d’écouter des événements spécifiques liés aux opérations de stockage et de récupération de données. Cela peut aider à synchroniser les données ou à gérer les mises à jour en temps réel. Pour écouter les événements, vous pouvez utiliser cette syntaxe :

localforage.on("setItem", (data) => {
  console.log("Data set:", data);
});

Grâce à ces fonctionnalités avancées, vous pouvez libérer tout le potentiel de localForage et créer des applications Web robustes et efficaces qui gèrent efficacement le stockage local.

Applications pratiques de localForage

Après avoir exploré les avantages de localForage par rapport au localStorage traditionnel et à son utilisation basique et avancée, approfondissons et découvrons son véritable potentiel en explorant des applications pratiques. Ici, nous verrons comment localForage peut être utilisé pour réaliser diverses fonctionnalités, de la mise en cache des réponses API pour des performances améliorées à l’activation d’expériences hors ligne et bien plus encore.

Mise en cache des réponses de l’API

Vous pouvez améliorer les performances et activer la fonctionnalité hors ligne en mettant en cache les réponses de l’API dans le stockage local. Cela permet à l’application de récupérer des données sans connexion Internet, offrant ainsi une expérience plus transparente.

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    localforage.setItem("apiData", data);
    return data;
  })
  .catch((error) => {
    
    return localforage.getItem("apiData"); 
  })
  .then((cachedData) => {
    if (cachedData) {
      console.log("Using cached data");
      
    } else {
      console.log("No cached data available");
      
    }
  });

Enregistrement des préférences et paramètres utilisateur

localForage est idéal pour stocker les préférences et les paramètres de l’utilisateur, permettant ainsi aux utilisateurs de personnaliser leur expérience. Ces paramètres personnalisés peuvent être récupérés et appliqués lors de visites ultérieures, améliorant ainsi le confort et la familiarité de l’utilisateur.

const themePreference = localStorage.getItem("theme") || "light"; 
localforage.setItem("theme", themePreference);
document.body.classList.add(themePreference);

const userSettings = {
  language: "en",
  fontSize: "16px",
};
localforage.setItem("userSettings", userSettings);

Création d’applications Web hors ligne

Avec localForage, les développeurs peuvent créer des applications Web qui donnent la priorité aux fonctionnalités hors ligne. En tirant parti du stockage local des données essentielles, ces applications peuvent fonctionner correctement même lorsqu’une connexion Internet n’est pas disponible. Cela permet aux utilisateurs de continuer à interagir avec l’application et de créer ou mettre à jour des données localement, sachant que toutes les modifications seront synchronisées avec le serveur lors de la reconnexion.

const todoList = localforage.getItem("todos") || [];

function addTodo(text) {
  todoList.push({ text, completed: false });
  localforage.setItem("todos", todoList);
  
}

function markTodoComplete(index) {
  todoList[index].completed = !todoList[index].completed;
  localforage.setItem("todos", todoList);
  
}


function synchronizeTodos() {
  
  localforage.setItem("todos", []); 
}

Mise en œuvre de la gestion de l’État local

localForage peut être utilisé pour la gestion de l’état local dans les applications d’une seule page (SPA). Il vous permet de stocker les données sur l’état de l’application localement, activant ainsi des fonctionnalités telles que la persistance des données de formulaire et des préférences utilisateur lors des actualisations de page au sein du SPA.

const shoppingCart = localforage.getItem("cart") || [];

function addToCart(productId) {
  const existingItem = shoppingCart.find((item) => item.id === productId);
  if (existingItem) {
    existingItem.quantity++; 
  } else {
    shoppingCart.push({ id: productId, quantity: 1 });
  }
  localforage.setItem("cart", shoppingCart);
  
}

function removeFromCart(productId) {
  const itemIndex = shoppingCart.findIndex((item) => item.id === productId);
  if (itemIndex !== -1) {
    shoppingCart.splice(itemIndex, 1);
    localforage.setItem("cart", shoppingCart);
    
  }
}

Conclusion

Il est évident que localForage change la donne. Grâce à sa nature asynchrone, localForage offre une réactivité plus transparente des applications, soulageant ainsi les frustrations liées aux threads bloqués. Sa capacité à stocker et récupérer des structures de données complexes élimine directement le besoin de conversion manuelle, simplifiant ainsi la gestion des données. De plus, son mécanisme intelligent de sélection intelligente et de secours pour le backend de stockage offre des performances et une compatibilité optimales sur différents navigateurs.