Maison >interface Web >Tutoriel H5 >Explication détaillée de plusieurs exemples de stockage de données HTML5 sur le client

Explication détaillée de plusieurs exemples de stockage de données HTML5 sur le client

伊谢尔伦original: 2017-05-30 10:40:482367parcourir

1.Cache d'application

HTML5 introduit le cache d'application, ce qui signifie que les applications Web peuvent être mises en cache et utilisées même sans réseau.

Le cache de l'application a trois caractéristiques

Navigation hors ligne
Ressources mises en cache plus rapides chargement
Réduisez la charge du serveur, le navigateur téléchargera uniquement les ressources mises à jour ou modifiées à partir du serveur

Comment l'utiliser est dans Ajouter un manifeste attribut

à la balise html. Chaque page avec un manifeste spécifié sera mise en cache lorsque l'utilisateur y accédera. Si l'attribut manifest n'est pas spécifié, la page ne sera pas mise en cache (sauf si elle est spécifiée directement dans le fichier manifeste).

L'extension de fichier recommandée pour les fichiers manifestes est : ".appcache".

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
   The content of the document......
</body>
</html>

Les fichiers manifestes sont de simples fichiers texte qui indiquent au navigateur ce qui est mis en cache (et ce qui ne l'est pas).

Les fichiers manifestes peuvent être divisés en trois sections :

CACHE MANIFEST - les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement
RÉSEAU - Les fichiers répertoriés sous cette rubrique nécessitent une connexion au serveur et ne seront pas mis en cache
FALLBACK - Les fichiers répertoriés sous cette rubrique nécessitent une connexion à la page Page de secours lorsque inaccessible (comme une page 404)

Un fichier manifeste complet

CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html

2.localStorage & sessionStorage

HTML5 propose deux nouvelles façons de stocker des données côté client :

localStorage - stockage de données sans limite de temps
sessionStorage - Stockage de données pour une séance

Avant, tout cela se faisait par cookies. Mais les cookies ne conviennent pas au stockage de grandes quantités de données car ils sont transmis à chaque requête au serveur, ce qui les rend lents et inefficaces.

localStorage et sessionStorage ont les mêmes méthodes de fonctionnement, telles que setItem(), getItem() et removeItem(), etc.
Méthodes de localStorage et sessionStorage :

setItem stocke la valeur
Objectif : stocker la valeur dans le champ clé
Utilisation : .setItem(key, value)
Exemple de code :

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem pour obtenir la valeur
Objectif : obtenir la valeur stockée localement de la clé spécifiée
Utilisation : .getItem(key)
Exemple de code :

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

removeItem delete key
Objectif : Supprimer la valeur stockée localement de la clé spécifiée
Utilisation : .removeItem(key)
Exemple de code :

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

clear effacer toutes les clés/valeurs
Objectif : Effacer toutes les clés/valeurs
Utilisation : .clear()

sessionStorage n'est pas un stockage persistant et sera effacé après la fermeture du navigateur. LocalStorage est utilisé pour le stockage local persistant, à moins que les données ne soient activement supprimées, les données n'expireront jamais.

3.indexDB

indexDB est une base de données NOSQL légère. Il est plus efficace que Web SQL (sqlite), y compris l'indexation, le traitement des transactions et des fonctions de requête robustes.

Ses fonctionnalités incluent :

Un site Web peut avoir une ou plusieurs bases de données IndexedDB, chaque base de données doit avoir un nom unique.
Une base de données peut contenir un ou plusieurs magasins d'objets. Un magasin d'objets (identifié de manière unique par un nom) est une collection d'enregistrements. Chaque enregistrement a une clé et une valeur. La valeur est un objet qui peut avoir une ou plusieurs propriétés. Les clés peuvent être basées sur un générateur de clés, dérivées d'un chemin de clé ou définies explicitement. Un générateur de clé qui génère automatiquement des entiers positifs consécutifs uniques. Le chemin de clé définit le chemin d'accès à la valeur de clé. Il peut s'agir d'un seul identifiant JavaScript ou de plusieurs identifiants séparés par des points. (Un peu comme les caractéristiques d'une base de données de colonnes)
Dans IndexedDB, presque toutes les opérations utilisent la méthode command->request->result. Par exemple, lors de l'interrogation d'un enregistrement, une requête est renvoyée et le résultat de la requête est obtenu dans le résultat de la requête. Un autre exemple consiste à ouvrir une base de données, à renvoyer une requête et à obtenir la référence de base de données renvoyée dans le résultat de la requête.
indexedDB doit être placé sur le serveur Web pour s'exécuter.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quel est le principe du transfert de CV ? Comment utiliser HTML5 pour obtenir un point d'arrêt de reprise du téléchargement de fichiersArticle suivant：Quel est le principe du transfert de CV ? Comment utiliser HTML5 pour obtenir un point d'arrêt de reprise du téléchargement de fichiers

Articles Liés

Voir plus