10 options de stockage côté client et quand l'utiliser

Le stockage et les opérations des données du navigateur, également appelés stockage client, sont utiles lorsque les données ne sont pas nécessaires ou ne peuvent pas être envoyées à un serveur Web.

Les scénarios de stockage et de fonctionnement des données du navigateur comprennent:

• Gardez l'état de l'application client, comme l'écran actuel, les données d'entrée, les préférences des utilisateurs, etc.
• Utilitaires qui accèdent aux données locales ou aux fichiers avec des exigences de confidentialité strictes.
• Application Web progressive (PWA) qui fonctionne hors ligne.

Voici dix options de stockage de données de navigateur:

1. Variables JavaScript
2. stockage de nœud DOM
3. Storage Web (localStorage et SessionStorage)
4. indexédb
5. API de cache (n'utilisez pas AppCache!)
6. API d'accès au système de fichiers
7. API d'entrée de fichiers et de répertoire
8. cookie
9. window.name
10. Websql

Cet article explorera ces dix différentes façons de stocker les données du navigateur, couvrant leurs limites, leurs avantages et leurs inconvénients, et les meilleures utilisations de chaque technologie.

Avant de parcourir ces options, jetez un œil rapide à la persistance des données ...

points clés

• Variable JavaScript: les données temporaires sont les plus rapides, mais elles seront effacées lorsque la page est actualisée;
• Stockage du nœud DOM: similaire aux variables JavaScript en termes de vitesse et de persistance, mais permet le stockage d'état dans les éléments HTML;
• Stockage Web (localStorage et SessionStorage): Convient pour le stockage persistant de petites quantités de données (localstorage) ou de stockage de session (SessionStorage);
• IndexedDB: Mieux pour les grandes quantités de données structurées qui doivent être persistées;
• API mis en cache: Idéalement utilisé pour stocker les réponses du réseau dans PWA pour une utilisation hors ligne; les API modernes, mais limitées aux données du réseau, ne conviennent pas au stockage d'État général.
• Cookie: utile pour les petites données qui doivent être envoyées avec des demandes HTTP;

Persistance des données

Habituellement, les données que vous stockez seront:

1. permanence : Il restera jusqu'à ce que votre code choisit de le supprimer, ou
2. Volatilité : Il reste jusqu'à la fin de la session du navigateur, généralement lorsque l'utilisateur ferme l'onglet.

La situation réelle est plus détaillée.

Les données permanentes peuvent être bloquées ou supprimées par les utilisateurs, les systèmes d'exploitation, les navigateurs ou les plug-ins à tout moment. Lorsque le navigateur aborde la capacité allouée à ce type de stockage, il peut décider de supprimer les éléments plus anciens ou plus grands.

Le navigateur enregistrera également l'état de la page. Vous pouvez partir à partir de la navigation sur le site Web et cliquer en arrière ou fermer et rouvrir l'onglet; Les variables et les données considérées comme une session uniquement sont toujours disponibles.

1. Variables JavaScript

Métriques Instructions La capacité n'est pas strictement limitée, mais lorsque vous remplissez la mémoire, le navigateur peut ralentir ou écraser les vitesses de lecture / écriture sont Les options les plus rapides ont une mauvaise persistance: les données seront actualisées par le navigateur et effacées pour stocker l'état dans les variables JavaScript est l'option la plus rapide et la plus facile. Je crois que vous n'avez pas besoin d'un exemple, mais ...

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

pros:

• facile à utiliser
• Quick
• Pas besoin de sérialisation ou de désérialisation

Inconvénients:

• Fragile: rafraîchissant ou fermeture de l'onglet effacera tout
• Les scripts tiers peuvent vérifier ou remplacer les valeurs globales (fenêtre)

Vous utilisez déjà des variables. Vous pouvez considérer le stockage permanent de l'état variable lors de la désinstallation de la page.

2. stockage de nœud DOM

Indicateur Instructions La capacité n'est pas strictement limitée, mais ne convient pas à de grandes quantités de données à lire / écrire rapidement, mauvaise persistance: les données peuvent être Rafraîchis par d'autres scripts ou rafraîchi la plupart des éléments DOM (à la page ou en mémoire) peuvent stocker des valeurs dans les propriétés nommées. Il est plus sûr d'utiliser des noms d'attribut préfixés avec des données-:

1. Les attributs n'auront jamais de fonctionnalité HTML associée
2. Vous pouvez accéder aux valeurs via l'attribut de jeu de données au lieu des méthodes .SetAttribute () et .getAttribute () plus longues.

Les valeurs

sont stockées sous forme de chaînes, donc la sérialisation et la désérialisation peuvent être nécessaires. Par exemple:

// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

pros:

• Vous pouvez définir des valeurs en javascript ou html - par exemple
• aide à stocker l'état d'un composant spécifique
• Dom est rapide! (Contrairement aux opinions populaires)

Inconvénients:

• Fragile: rafraîchissant ou fermeture L'onglet effacera tout (sauf si la valeur est rendue en HTML par le serveur)
• chaînes uniquement: la sérialisation et la désérialisation sont nécessaires
• Biger Dom affectera les performances
• Les scripts tiers peuvent vérifier ou écraser les valeurs

Les nœuds DOM stockent plus lentement que les variables. Utilisez-le avec prudence lorsqu'il est utile de stocker l'état d'un composant en HTML.

3. Storage Web (localStorage et SessionStorage)

Indicateur Instructions Capacité 5 Mo de vitesse de lecture / écriture Fonctionnement synchrone: peut être des données persistantes lentes jusqu'à ce qu'elle soit effacée que le stockage Web fournit deux API similaires Pour définir les paires de noms / valeur. Utilisation:

1. window.Localstorage stocke des données persistantes, et
2. window.SessionStorage conserve les données de session uniquement tandis que l'onglet du navigateur reste ouvert (mais voir la persistance des données)

Stockage ou mise à jour des éléments nommés à l'aide de .SetItem ():

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

les récupérer en utilisant .getItem ():

const state = JSON.parse( localStorage.getItem('state') );

Supprimez-les avec .reMoveItem ():

localStorage.removeItem('state')

Les autres propriétés et méthodes incluent:

• .Length: nombre d'éléments stockés
• .key (n): nom de la nième clé
• .Clear (): Supprimer tous les éléments stockés

La modification de n'importe quelle valeur augmentera un événement de stockage dans d'autres onglets de navigateur / Windows connectés au même domaine. Votre demande peut répondre en conséquence:

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

pros:

• API de paire de nom / valeur simple
• Session et options de stockage persistantes
• bon support du navigateur

Inconvénients:

• chaînes uniquement: la sérialisation et la désérialisation sont nécessaires
• Données non structurées sans transactions, index ou recherches
• L'accès synchrone affecte les performances des grands ensembles de données

Le stockage Web est parfait pour des valeurs plus simples, plus petites et temporaires. Il n'est pas très adapté pour stocker de grandes quantités d'informations structurées, mais vous pouvez éviter les problèmes de performances en écrivant des données lorsque la page est déchargée.

4. indexédb

Indicateurs Instructions La capacité dépend de l'équipement. Au moins 1 Go, mais jusqu'à 60% des données de persistance rapide de la vitesse de lecture / écriture du disque restant restent jusqu'à ce qu'elle soit effacée indexdDB fournit une API de bas niveau similaire à l'OSQL pour stocker de grandes quantités de données. Le magasin peut être indexé, peut être mis à jour à l'aide des transactions et peut être recherché à l'aide de méthodes asynchrones.

L'API indexée indexée est complexe et nécessite un traitement d'événements. La fonction suivante ouvre une connexion de base de données lors du passage du nom, du numéro de version et de la fonction de mise à niveau facultative (appelée lorsque le numéro de version change):

// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

Le code suivant se connecte à la base de données MyDB et initialise le magasin d'objets TODO (similaire aux tables SQL ou aux collections MongoDB). Il définit ensuite une clé d'accès automatique nommé ID:

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

Une fois la connexion DB prête, vous pouvez ajouter de nouveaux éléments de données dans une transaction:

const state = JSON.parse( localStorage.getItem('state') );

Vous pouvez récupérer des valeurs, telles que le premier élément:

localStorage.removeItem('state')

pros:

Stockage de données flexible avec un espace maximum
Transactions, index et options de recherche forts
bon support du navigateur

Inconvénients:

une API complexe de rappel et d'événements

IndededDB est le meilleur choix pour un stockage fiable de grandes quantités de données, mais vous devez utiliser une bibliothèque de wrapper telle que IDB, Dexie.js ou JSStore.

5. API de cache

Indicateur Instructions La capacité dépend de l'appareil, mais Safari limite chaque domaine à 50 Mo de données de lecture / écriture de données persistantes pour être claires ou cache API Fournit un stockage pour la demande HTTP et les paires d'objets de réponse jusqu'à deux semaines plus tard dans Safari. Vous pouvez créer autant de caches nommés que vous souhaitez stocker un certain nombre d'éléments de données réseau.

Cette API est couramment utilisée dans les travailleurs de service pour mettre en cache les réponses du réseau pour les applications Web progressives. Lorsque l'appareil est déconnecté du réseau, les actifs en cache peuvent être répartis afin que l'application Web puisse s'exécuter hors ligne.

Le code suivant stocke la réponse réseau dans un cache appelé myCache:

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

Les fonctions similaires peuvent récupérer des éléments de Cache. Dans cet exemple, il renvoie le texte du corps de réponse:

// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

pros:

• Stockage Toute réponse réseau
• peut améliorer les performances des applications Web
• Autoriser les applications Web à s'exécuter hors ligne
• API moderne basée sur les promesses

Inconvénients:

• pas adapté pour le stockage de l'état de l'application
• peut-être moins utile en dehors des applications Web progressives
• Apple n'est pas amical avec les API PWA et le cache

L'API du cache est le meilleur choix pour stocker des fichiers et des données récupérés du réseau. Vous pouvez l'utiliser pour stocker l'état d'application, mais il n'est pas conçu à cet effet et il existe de meilleures options. 5.5 AppCache

AppCache est le prédécesseur de l'API de cache qui a expiré. Ce n'est pas la solution de stockage que vous recherchez. Il n'y a rien de bon à regarder ici. Veuillez partir.

API d'accès au système de fichiers

Métriques Instructions La capacité dépend de la vitesse de lecture / écriture d'espace disque restant dépend des données de persistance du système de fichiers restent jusqu'à ce que le système de fichiers efface l'accès à l'API autorise l'API. navigateur pour lire, écrire, modifier et supprimer des fichiers dans le système de fichiers local. Le navigateur s'exécute dans un environnement de bac à sable, donc l'utilisateur doit accorder des autorisations à un fichier ou un répertoire spécifique. Cela renvoie un Système de fichiers pour que l'application Web puisse lire ou écrire des données comme une application de bureau. La fonction suivante enregistre le blob dans un fichier local:

pros:

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

Les applications Web peuvent lire et écrire en toute sécurité aux systèmes de fichiers locaux

• réduit la nécessité de télécharger des fichiers ou de traiter des données sur le serveur
• Une grande fonctionnalité des applications Web progressives
Inconvénients:

Le navigateur prend en charge un minimum (chrome uniquement)

• API peut changer
Cette option de stockage est la plus excitante pour moi, mais vous devrez attendre quelques années de plus avant de pouvoir l'utiliser pour la production.

API d'entrée de fichiers et de répertoire

Métriques Instructions La capacité dépend de la vitesse de lecture / écriture du disque restant des données de persistance inconnues jusqu'à ce qu'elle soit effacée, l'API d'entrée du fichier et le répertoire fournit un bac à sable Système de fichiers qui peut être utilisé pour les domaines qui créent, écrivent, lisent et suppriment les répertoires et les fichiers. pros:

Il peut y avoir des utilisations intéressantes

Inconvénients:

Non standard, l'incompatibilité entre les implémentations et le comportement peut changer.

MDN indique clairement:

N'utilisez pas cette fonctionnalité sur les sites Web de production . Il faudra au moins quelques années pour un large soutien.

8. cookie

Indicateur Instructions Capacité 80KB par domaine (20 cookies, jusqu'à 4KB par cookie) Vitesse de lecture / écriture rapide et bonne durabilité: les données sont conservées jusqu'à ce que Il est éliminé ou des cookies expirés sont des données spécifiques au domaine. Ils sont connus pour suivre la réputation des gens, mais ils sont essentiels pour tout système qui doit maintenir l'état du serveur, comme la connexion. Contrairement à d'autres mécanismes de stockage, les cookies sont généralement passés entre le navigateur et le serveur dans chaque demande et réponse HTTP HTTP. Les deux appareils peuvent vérifier, modifier et supprimer les données de cookie.

document.cookie définit la valeur des cookies dans le client JavaScript. Vous devez définir une chaîne où le nom et la valeur sont séparés par un signe égal (=). Par exemple:

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

Les valeurs ne peuvent pas contenir des virgules, des demi-colons ou des espaces, donc EncodeuriComponent () peut être nécessaire:

// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

D'autres paramètres de cookies peuvent être joints à l'aide de délimiteurs de semi-colonières, y compris:

; domaine =: Si ce n'est pas défini, le cookie n'est disponible que dans le domaine URL actuel. Use; path = mysite.com permet d'être utilisé sur n'importe quel sous-domaine de mysite.com.
; path =: Si ce n'est pas défini, le cookie n'est disponible que dans le chemin actuel et ses sous-cheminées. Set; path = / pour permettre tout chemin dans le domaine.
; max-age =: temps d'expiration des cookies (secondes) - par exemple; max-age = 60.
; expire =: Date d'expiration des cookies - par exemple; expire = thu, 04 juillet 2021 10:34:38 ​​UTC (utilisez date.toutcstring () pour le formatage approprié).
; sécurisé: le cookie sera transmis uniquement sur les HTTPS.
; httponly: rend les cookies incapables d'accéder au client JavaScript.
; Samesite =: contrôle si un autre domaine peut accéder aux cookies. Définissez-le sur LAX (par défaut, partagez des cookies sur le domaine actuel), strict (bloque le cookie initial lors du suivi du lien à partir d'un autre domaine) ou aucun (illimité).

Exemple: définissez un cookie d'état qui expire après 10 minutes et peut être utilisé dans n'importe quel chemin vers le domaine actuel:

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

Document.cookie Renvoie une chaîne contenant chaque paire de noms et de valeur, séparée par un point-virgule. Par exemple:

const state = JSON.parse( localStorage.getItem('state') );

La fonction ci-dessous analyse la chaîne et la convertit en un objet contenant une paire de valeurs de nom. Par exemple:

localStorage.removeItem('state')

pros:

moyen fiable de préserver l'état entre le client et le serveur
chemins de domaine et (facultatif) uniquement
Utilisez max-âge (secondes) ou expire (date) pour le contrôle automatique d'expiration
utilisé par défaut dans la session en cours (définissez la date d'expiration pour persister les données au-delà de la rafraîchissement de la page et de la fermeture de l'onglet)

Inconvénients:

• Les cookies sont souvent bloqués par les navigateurs et les plugins (ils sont généralement convertis en cookies de session afin que le site Web puisse continuer à fonctionner)
• Implémentation JavaScript maladroite (il est préférable de créer votre propre gestionnaire de cookies ou de choisir une bibliothèque comme JS-Cookie)
• chaînes uniquement (nécessite la sérialisation et la désérialisation)
• L'espace de stockage est limité
• Les cookies peuvent être vérifiés par des scripts tiers à moins que vous ne restreignez l'accès
• accusé de violations de la vie privée (la législation régionale peut vous obliger à montrer des avertissements sur les cookies non essentiels)
• Les données de cookie sont jointes à chaque demande et réponse HTTP, ce qui peut affecter les performances (stocker 50 Ko de données de cookie, puis demander dix fichiers 1 octet générera un million d'octets de bande passante)

Évitez d'utiliser des cookies sauf s'il n'y a pas d'alternative viable.

9. window.name

Métriques Instructions Les changements de capacité, mais devraient être en mesure de s'adapter à plusieurs mégaoctets de vitesses de lecture / d'écriture de la session de persistance restent à s'adapter jusqu'à la fermeture jusqu'à la fenêtre .Name Les propriétés définissent et obtient le nom du contexte de navigation de la fenêtre. Vous pouvez définir une seule valeur de chaîne qui persiste entre rafraîchir le navigateur ou lier à un autre emplacement et cliquer en arrière. Par exemple:

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

Vérifiez la valeur en utilisant la méthode suivante:

// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1

pros:

• facile à utiliser
• Données disponibles pour la session uniquement

Inconvénients:

• chaînes uniquement: la sérialisation et la désérialisation sont nécessaires
• Les pages dans d'autres champs peuvent lire, modifier ou supprimer des données (ne les utilisez pas pour des informations sensibles)

window.name n'a jamais été conçu pour le stockage de données. C'est une astuce, et il existe de meilleures options pour .

10. Websql

Indicateur Instructions Capacité 5 Mo par domaine Lire / écrire des données de persistance lente jusqu'à ce qu'elle soit effacée WebSQL est une tentative de stockage de base de données de type SQL pour introduire des navigateurs. Exemple de code:

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

Chrome et certaines versions de Safari prennent en charge cette technologie, mais Mozilla et Microsoft s'y opposent et prennent en charge indexéddb.

pros:

Conçu pour le stockage et l'accès puissants des données du client
Syntaxe SQL familière souvent utilisée par les développeurs côté serveur

Inconvénients:

La prise en charge du navigateur est limitée et il y a des erreurs
Incohérence entre la syntaxe SQL entre les navigateurs
ASync mais API basé sur un rappel maladroit
Performances médiocres

N'utilisez pas WebSQL! Ce n'est pas une option viable depuis que les spécifications de 2010 ont été obsolètes.

Vérifiez le stockage

L'API de stockage

peut vérifier l'espace disponible du stockage Web, des API indexéddb et du cache. Tous les navigateurs à l'exception de Safari et IE prennent en charge une API basée sur les promesses, qui fournit une méthode .Stimate () pour calculer les quotas (l'espace disponible pour le domaine) et l'utilisation (l'espace utilisé). Par exemple:

const state = JSON.parse( localStorage.getItem('state') );

Il existe deux autres méthodes asynchrones disponibles:

• .PerSist (): Retour True si le site a la permission de stocker des données persistantes,
• .PerSisted (): Renvoie True si le site a stocké des données persistantes.

Le panneau d'application dans l'outil de développeur de navigateur (appelé Storage dans Firefox) vous permet de visualiser, de modifier et d'effacer Localstorage, SessionStorage, indededDB, websQL, cookies et stockage de cache.

Vous pouvez également vérifier les données de cookie envoyées dans les en-têtes de demande HTTP et de réponse en cliquant sur n'importe quel élément du panneau Web de l'outil de développeur.

rangement hotpot

Ces solutions de stockage ne sont pas parfaites, vous devez adopter plusieurs solutions dans des applications Web complexes. Cela signifie apprendre plus d'API. Mais c'est une bonne chose d'avoir le choix dans chaque situation - bien sûr, disons que vous pouvez choisir la bonne option!

Les questions fréquemment posées sur les alternatives de stockage locales

Que puis-je utiliser au lieu du stockage local?

Lorsque vous recherchez des alternatives au stockage local dans le développement Web, des options telles que le stockage de session, les cookies et l'indexé peuvent être prises en compte. Le stockage de session fournit un stockage temporaire pour les séances de page, tandis que les cookies sont de petits éléments de données envoyés avec chaque demande HTTP qui peut être utilisée pour la gestion de session et le stockage de données limitées. IndededDB fournit une solution plus puissante pour stocker des données structurées du côté du client, ce qui le rend adapté aux applications qui nécessitent une récupération de données asynchrones. Les solutions de stockage côté serveur (telles que MySQL, PostgreSQL, MongoDB) ou les bases de données basées sur le cloud (telles que Firebase, AWS DynamoDB ou Google Cloud Firestore) peuvent être préférables pour un stockage de données plus large ou lorsque la sécurité et la persistance sont essentielles. De plus, certains cadres clients fournissent leurs propres solutions de gestion d'État, tandis que les travailleurs de service peuvent mettre en cache des données et des actifs pour les fonctionnalités hors ligne, ce qui les rend adaptés aux applications Web progressives (PWA).

Quand ne devriez-vous pas utiliser le stockage local?

Le stockage local est une solution de stockage client universelle, mais dans certains cas, ce n'est peut-être pas l'option la plus appropriée. Premièrement, le stockage local ne convient pas au stockage d'informations sensibles ou confidentielles car elle manque de cryptage ou de mesures de sécurité qui la rendent vulnérable à l'accès non autorisé. Les données critiques telles que les mots de passe ou les identités personnelles doivent être stockées en toute sécurité côté serveur à l'aide d'un protocole de sécurité solide. Deuxièmement, le stockage local a une capacité limitée, généralement d'environ 5 à 10 Mo par domaine. Il ne convient pas aux applications qui doivent traiter de grandes quantités de données. Dans ce cas, les bases de données côté serveur ou les options client plus puissantes telles que IndededDB doivent être prises en compte pour s'adapter aux ensembles de données plus importants. Enfin, le stockage local peut entraîner des problèmes de performances, en particulier lorsqu'il s'agit de grands ensembles de données, car il s'exécute de manière synchrone et peut bloquer le thread principal. Pour les applications critiques de performance, vous pouvez utiliser des solutions de stockage asynchrones telles que IndededDB ou implémenter la mise en cache de mémoire pour maintenir une expérience utilisateur fluide. En résumé, bien que le stockage local soit précieux pour le stockage léger des données non sensible, les exigences spécifiques du projet doivent être évaluées. Pour des informations sensibles, de grands ensembles de données ou des applications critiques de performances, des solutions de stockage alternatives doivent être explorées pour garantir la sécurité des données, l'évolutivité et la meilleure expérience utilisateur.

Quel est le meilleur, localStorage ou SessionStorage?

Le choix de LocalStorage et SessionStorage dépend principalement de la durée de persistance des données dont vous avez besoin et de votre cas d'utilisation spécifique. LocalStorage est un meilleur choix lorsque vous avez besoin de données pour être persistée entre les séances de navigateur. Il convient au stockage de données telles que les préférences de l'utilisateur, les paramètres ou les ressources de cache, qui doivent être conservées à l'utilisateur même si l'utilisateur ferme le navigateur et revient sur le site Web plus tard. Sa persistance et sa plus grande capacité de stockage le rendent idéal pour les scénarios où une rétention de données à long terme est requise. SessionStorage, en revanche, est idéal pour les données qui ne sont disponibles que lors de la session de page en cours. Lorsqu'un utilisateur ferme un onglet ou un navigateur, les données sont automatiquement effacées, garantissant la confidentialité et réduisant le risque de stockage non intentionnel d'informations inutiles. Cela le rend idéal pour gérer des données temporaires telles que les données de formulaire, le contenu de CART ou la gestion de l'État dans une seule interaction utilisateur.

Qu'est-ce qu'une base de données client?

La base de données client, également connue sous le nom de base de données frontale, est une base de données qui réside dans le client d'application Web (généralement dans le navigateur Web de l'utilisateur) et y s'exécute. Il est utilisé pour stocker et gérer des données sur les appareils clients, permet aux applications Web de travailler hors ligne, de réduire la charge du serveur et d'améliorer l'expérience utilisateur en minimisant le besoin de demandes de serveurs fréquentes. Les bases de données des clients sont souvent utilisées dans le développement Web pour stocker et récupérer des données directement sur l'appareil de l'utilisateur. L'un des exemples les plus courants de bases de données clients est indexédDB, une API JavaScript de bas niveau qui fournit une base de données structurée pour stocker de grandes quantités de données dans un navigateur Web. IndededDB permet aux développeurs de créer, de lire, de mettre à jour et de supprimer des données, ce qui le rend adapté aux applications qui nécessitent un stockage et une gestion hors ligne de grandes quantités d'informations. D'autres exemples de bases de données clients incluent le stockage Web (LocalStorage et SessionStorage) pour stocker de petites quantités de données, ainsi que diverses bases de données en mémoire implémentées en JavaScript pour le stockage de données temporaires pendant les séances utilisateur. Les bases de données des clients sont particulièrement utiles pour les applications Web telles que les applications Web progressives (PWAS), où la fonctionnalité doit être maintenue même si l'utilisateur est hors ligne ou a une connexion Internet limitée. Ils complètent la base de données côté serveur en fournissant un mécanisme pour stocker les données localement sur les appareils utilisateur, réduisant ainsi la latence et améliorant l'expérience utilisateur.

Quels sont les différents types de stockage client?

Il existe de nombreuses formes de stockage client dans le développement Web, chacune avec ses propres caractéristiques et cas d'utilisation. Un type commun est le stockage Web, qui comprend LocalStorage et SessionStorage. LocalStorage convient au stockage de petites quantités de données qui doivent être persistées entre les séances de navigateur, ce qui le rend adapté aux préférences ou paramètres des utilisateurs. Au lieu de cela, SessionStorage est limitée de session, stockant les données uniquement pendant une seule session, ce qui la rend idéale pour les données temporaires, telles que le contenu de panier ou les données de formulaire requises lors de l'interaction utilisateur avec les pages Web. Une autre option est IndededDB, un système de base de données client plus avancé. IndededDB fournit un stockage structuré pour gérer de grandes quantités de données sur les appareils des utilisateurs. Il prend en charge la récupération des données asynchrones, l'indexation, les transactions, etc., ce qui le rend idéal pour les applications qui nécessitent un traitement complexe de données et des capacités hors ligne telles que les applications Web progressives (PWA). De plus, les cookies sont de petits fragments de données qui peuvent être stockés sur le périphérique client et envoyés au serveur avec chaque demande HTTP. Bien qu'ils ne soient pas souvent utilisés dans le stockage général des données aujourd'hui, les cookies peuvent toujours être utilisés pour des tâches telles que la gestion des sessions, l'authentification des utilisateurs et le suivi des préférences des utilisateurs. Chaque type de stockage client a ses avantages et ses inconvénients, et le choix dépend de vos exigences spécifiques telles que la taille des données, les exigences de persistance et les cas d'utilisation.

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!