Avant H5, le stockage était principalement utilisé avec les cookies. Les inconvénients des cookies sont avec des données sur la tête de demande, et la taille est à moins de 4k. Pollution du domaine Lord.
Applications principales: panier d'achat, connexion client
Pour le navigateur IE, il y a UserData, la taille est de 64k, uniquement prise en charge par le navigateur IE.
CibleStockage de manière clé, stockage permanent, ne manquez jamais, sauf s'il est supprimé manuellement.
taille:Chaque nom de domaine 5m
Situation de soutien:Remarque: IE9 LocalStorage ne prend pas en charge les fichiers locaux.
Méthode de détection: if (if (window.LocalStorage) {alert ('Ce navigateur prend en charge localStorage');} else {alert ('Ce navigateur ne prend pas en charge localStorage');} API commune:getItem // prendre des enregistrements
SetItIten // Enregistrement des paramètres
Supprimer // Supprimer l'enregistrement
Clé // prendre la valeur correspondant à la clé
Enregistrements clairs //
Contenu de stockage:Array, images, json, style, script. Essence Essence (Tant qu'il peut être sérialisé dans un contenu de chaîne, il peut être stocké)
2. Session de stockage localeLocalStorage dans l'API de stockage locale de HTML5 est le même que SessionStorage.
3. Cache hors ligne (cache d'application)Le fichier requis pour les applications de cache locales
Comment utiliser:① Configurer le fichier manifeste
Page:
<!Fichier manifeste:
Le fichier manifeste est un fichier texte simple qui indique au navigateur que le contenu du cache (et le contenu qui ne cache pas).
Les fichiers manifestes peuvent être divisés en trois parties:
① Cache Manifest - Le fichier répertorié dans ce titre se cachera après le premier téléchargement
②Network - Les fichiers répertoriés sous ce titre doivent être connectés au serveur sans être mis en cache
③ Fallback - Les fichiers répertoriés sur ce titre stipulent que les pages de retraite lorsque la page ne peut pas être consultée (comme la page 404)
Démo complet:Cache Manifest # 2016-07-24 v1.0.0 / thème.css / main.jsnetwork: login.jsp Fallback: /html//offline.htmlSur le fichier Server: Manifest doit configurer le type MIME correct, c'est-à-dire Text / Cache-Manifest.
Comme Tomcat:
<MIME-MOPP> <LallalEd> manifeste </pulsex> <Mime-Type> Texte / Cache-Manifest </ MIME-TYPE> </ MIME-MAPPING >>API commune:
Le noyau est l'objet ApplicationCache.
0 (non acheté): pas de cache, c'est-à-dire aucun cache d'application lié à la page
1 (inactif): inactif, c'est-à-dire que le cache d'application n'est pas mis à jour
2 (Vérification): Pendant le chèque, il télécharge le fichier description et vérifie la mise à jour
3 (Téléchargement): Dans le téléchargement, le cache d'application télécharge la ressource spécifiée dans le fichier de description
4 (Updateready): mis à jour, toutes les ressources ont été téléchargées
5 (inactif): abandonné, c'est-à-dire que le fichier de description du cache d'application n'existe plus, de sorte que la page ne peut pas accéder au cache d'application
Événements connexes:Indique des modifications dans l'application de l'application de l'état de cache:
Vérification: déclenché lorsque le navigateur recherche le cache d'application
Erreur: déclencher lors de l'envoi d'une erreur lors de la vérification ou du téléchargement des ressources
NoupDate: déclenché lors de la vérification du fichier de description et a constaté que le fichier n'est pas modifié
Télécharger: déclenché lors du téléchargement de l'application des ressources de cache
Progrès: déclenché en continu dans le processus de cache d'application de téléchargement de fichiers
Mise à jour: le nouveau téléchargement de cache d'application sur la page déclenche
Cached: déclenche lorsque le cache d'application est terminé disponible
Trois avantages du cache d'application:① Procédure hors ligne
② Augmenter la vitesse du revenu facial de la page
③ Réduire la pression du serveur
Note:
1. La limite de capacité du navigateur sur les données de cache peut ne pas être la même (les restrictions fixées par certains navigateurs sont de 5 Mo par site)
2. Si le fichier manifeste ou un fichier répertorié à l'intérieur ne peut pas être téléchargé normalement, l'ensemble du processus de mise à jour sera considéré comme un échec et le navigateur continuera à utiliser l'ancien cache
3. Citation Le HTML de manifeste doit être le même que le fichier manifeste, dans le même domaine
4. Le navigateur mettra automatiquement en cache le fichier HTML du fichier manifeste, ce qui entraîne la mise à jour de la version de mise à jour si le contenu HTML est modifié.
5. Le cache dans le fichier manifeste n'a rien à voir avec le réseau et le repli.
6. Les ressources de secours doivent être les mêmes que le fichier manifeste
7. Après la mise à jour de la version, il doit être actualisé une fois pour lancer la nouvelle version (la situation de la page sera brossée une fois), et la version de surveillance de l'événement doit être ajoutée.
8. Même si les autres pages du site ne sont pas configurées, la ressource de demande est accessible à partir du cache dans le cache
9. Lorsque le fichier manifeste modifie, la demande de ressource elle-même déclenchera également la mise à jour
La différence entre le cache hors ligne et le cache traditionnel du navigateur:1. Le cache hors ligne concerne toute l'application, le cache du navigateur est un seul fichier
2. Vous pouvez ouvrir la page si vous avez une déconnexion de cache hors ligne.
3. Le cache hors ligne peut informer activement le navigateur pour mettre à jour les ressources
4.Web SQLBase de données relationnelle, accès via l'instruction SQL
L'API de la base de données Web SQL ne fait pas partie de la spécification HTML5, mais il s'agit d'une spécification indépendante, introduisant un ensemble d'API qui utilise SQL pour faire fonctionner des bases de données clients.
Situation de soutien:La base de données Web SQL peut fonctionner dans la dernière version de Safari, Chrome et Opera Browser.
Méthode de base: ①Pendatabase: Cette méthode utilise des bases de données existantes ou de nouvelles bases de données pour créer un objet de base de données. ②Transaction: cette méthode nous permet de contrôler une transaction et d'effectuer une soumission ou un retour en fonction de cette situation. ③ ExecuteSQL: Cette méthode est utilisée pour effectuer des requêtes SQL réelles. Ouvrez la base de données: var db = openDatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024, fn); // openDatabase () 方法对应的五个参数分别为 ： 数据库名称、版本号、描述文本、 Taille de la base de données, rappel de la création Exécuter l'opération de requête: Var db = openDatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); Insérer des données: Var db = openDatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); 1, Winty) '); Lire les données: Db.transaction (function (tx) {tx.exectuesql ('select * from win', [], function (tx, résultats) {var len = result.rows.length, msg = <p> + </ p>; }}, nul);});Il peut être vu à partir de ces opérations qui utilisent essentiellement des instructions SQL pour effectuer des opérations liées à la base de données.
5. indexéddbL'API de la base de données d'index (indexée) (dans le cadre de HTML5) est utile pour créer une application Web HTML5 hors ligne avec des données de stockage riches en données. Dans le même temps, il aide également les données de cache locales, afin que les applications Web en ligne traditionnelles (telles que les applications Web mobiles) puissent s'exécuter et répondre plus rapidement.
API asynchrone:La plupart des opérations dans IndededDB ne sont pas nos méthodes d'appel couramment utilisées, renvoyant les résultats du résultat, mais le mode de demande de demande, comme l'ouverture de l'opération de base de données
De cette façon, lorsque nous avons ouvert la base de données, nous avons en fait renvoyé un objet DB, et cet objet était dans le résultat. Comme on peut le voir sur la figure ci-dessus, sauf pour le résultat. Plusieurs attributs importants sont ONERROR, ONSUCCESS, ONUPDedeeded (lorsque nous demandons le numéro de version de la base de données et le numéro de version de la base de données existante est incohérent). Ceci est similaire à notre demande AJAX. Après avoir initié cette demande, nous n'avons pas pu déterminer quand il a réussi, nous devons donc traiter une logique dans le rappel.
Éteignez et supprimez: Fonction closebb (db) {db.close ();} fonction suppriméeB (name) {indededdb.deletedatabase (name);} Stockage de données:Il n'y a pas de concept dans IndededDB, mais ObjectStore. En d'autres termes, un objetStore équivaut à un tableau, qui est associé à chaque élément de données stocké dedans.
Nous pouvons utiliser un champ spécifié dans chaque enregistrement en tant que valeurs de clés (cheype), ou utiliser le nombre de génération automatique comme valeurs de clé (KeyGenrator), ou non spécifiés. Différents types de choix de clés, la structure de données que ObjectStore peut stocker peut également être stockée.
Ce qui précède est tout le contenu de cet article.