Comment stocker des données illimitées * dans le navigateur avec indexddb

Cet article explore IndededDB, une API de navigateur robuste pour le stockage de données côté client dépassant la capacité des méthodes alternatives. Les options de stockage de données côté client se sont considérablement développées, offrant des alternatives aux mises à jour de la base de données basées sur le serveur.

Avantages clés de l'indexéddb:

• Capacité de stockage élevée: IndexedDB offre beaucoup plus de stockage que les autres options côté client, offrant potentiellement au moins 1 Go et jusqu'à 60% de l'espace disque disponible par domaine.
• Opérations asynchrones: sa nature asynchrone permet un traitement en arrière-plan sans bloquer d'autres scripts, idéal pour les grands ensembles de données.
• Opérations de crud complètes: prend en charge la création, la lecture, la mise à jour et la suppression des enregistrements (CRUD), ainsi que la version de la base de données et la gestion du schéma.
• Intégrité des données: maintient l'intégrité des données par le biais de transactions garantissant que toutes les opérations réussissent ou échouent ensemble.
• Accès aux données basés sur les clés: Les données résident dans les magasins d'objets, avec des enregistrements identifiés par les clés.
• Intégration du navigateur Devtools: Le débogage et la gestion sont facilités via le navigateur Devtools, permettant l'examen, la modification et la compensation des données.
• Prise en charge de la bibliothèque: Bien que cela ne prenne pas en charge les fonctionnalités JavaScript modernes telles que les promesses et les asynchrones / attendre, des bibliothèques comme idb comblent cet écart.

Pourquoi choisir le stockage côté client?

Bien que le stockage côté serveur convienne à la plupart des données de l'utilisateur, le stockage côté client est avantageux pour:

• Paramètres spécifiques au périphérique: Préférences d'interface utilisateur, mode clair / sombre, etc.
• Données éphémères: Données temporaires comme les photos avant le téléchargement.
• Synchronisation des données hors ligne: Données pour la synchronisation ultérieure dans les zones à faible connectivité.
• Applications Web progressives (PWAS): Fonctionnalité hors ligne pour des raisons d'utilisation ou de confidentialité.
• CACHING D'ACTIVES: Amélioration des performances par la mise en cache.

Comparaison des API de stockage du navigateur:

1. Stockage Web: Stockage de paire de noms de nom-valeur simple et synchrone. Convient aux petites données non critiques (5 Mo par domaine).
2. API CACHE: stocke les paires de demande / réponse HTTP, principalement utilisées par les travailleurs du service pour la mise en cache PWA (le stockage varie selon le navigateur).
3. indexéddb: Une base de données NOSQL côté client pour les données, les fichiers et les blobs (au moins 1 Go par domaine, potentiellement jusqu'à 60% de l'espace disque disponible).

Fondamentaux indexés:

IndededDB, standardisé en 2015 (API 2.0 en 2018, API 3.0 en développement), bénéficie d'un large support de navigateur. Cet article se concentre sur les concepts de base:

• Base de données: Le conteneur de niveau supérieur. L'accès est limité au même domaine.
• Store d'objets: Un magasin de nom / valeur pour les données connexes (comme les collections dans MongoDB ou les tables en SQL).
• Clé: Un identifiant unique pour chaque enregistrement dans un magasin d'objets (peut être généré automatiquement ou personnalisé).
• Auto-Onointement: Incrémente automatiquement les valeurs de clé lors de l'ajout d'enregistrement.
• Index: organise des données dans un magasin d'objets pour une recherche efficace.
• Schéma: définit les magasins d'objets, les clés et les index.
• Version: Un entier pour les mises à jour du schéma.
• Fonctionnement: Une action de base de données (crud).
• Transaction: Enveloppe les opérations pour assurer l'intégrité des données (tout ou rien).
• curseur: itére efficacement les enregistrements, en évitant de tout charger en mémoire.
• Exécution asynchrone: Les opérations s'exécutent de manière asynchrone, permettant à un autre code de continuer l'exécution.

Exemple de structure de données (note enregistre):

{
  id: 1,
  title: "My first note",
  body: "A note about something",
  date: <date object>,
  tags: ["#first", "#note"]
}

indexéddb utilise des événements et des rappels, manquant de promesses natives et d'async / attendre l'assistance (bien que des bibliothèques comme idb fournissent ceci).

Débogage avec Devtools:

Le navigateur Devtools (onglet d'application dans les navigateurs à base de chrome, stockage dans Firefox) est inestimable pour examiner, modifier et compenser les données indexées.

Vérification de la prise en charge indexée et de l'espace de stockage:

if ('indexedDB' in window) {
  // IndexedDB supported
} else {
  console.log('IndexedDB is not supported.');
}

(async () => {
  if (!navigator.storage) return;
  const estimate = await navigator.storage.estimate();
  const available = Math.floor((estimate.quota - estimate.usage) / 1024 / 1024);
  // Check available space and proceed accordingly
})();

Ouverture d'une connexion indexée:

const dbOpen = indexedDB.open('notebook', 1);

dbOpen.onupgradeneeded = event => {
  const db = dbOpen.result;
  // Create object stores and indexes here
};

dbOpen.onerror = err => {
  console.error(`indexedDB error: ${err.errorCode}`);
};

dbOpen.onsuccess = () => {
  const db = dbOpen.result;
  // Use the db connection for further operations
};

(Les sections suivantes détaillant les opérations CRUD, les mises à jour du schéma et l'utilisation du curseur sont omises par la brièveté, mais la réponse originale fournit des exemples complets.)

Questions fréquemment posées (FAQ):

La réponse d'origine comprend une section FAQ complète couvrant la taille maximale du stockage, la gestion de grands ensembles de données, le dépassement de limite de stockage, l'augmentation de la limite de stockage, la vérification de l'utilisation, la persistance des données, le stockage d'objets Blob, la sécurité, l'utilisation des travailleurs et la gestion des erreurs. Ceux-ci sont tous traités en détail dans la sortie d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!