Explication détaillée de plusieurs exemples de stockage de données HTML5 sur le client-Tutoriel H5-php.cn

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

伊谢尔伦

Libérer： 2017-05-30 10:40:48

original

2275 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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");

Copier après la connexion

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");

Copier après la connexion

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");

Copier après la connexion

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!