Applications HTML5 : applications hors ligne et applications stockées-Tutoriel H5-php.cn

Applications HTML5 : applications hors ligne et applications stockées

不言

Libérer： 2018-08-08 09:53:00

original

2101 Les gens l'ont consulté

Le contenu de cet article concerne les applications HTML5 : les applications hors ligne et les applications de stockage. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Application hors ligne

L'application hors ligne est une nouvelle fonctionnalité de HTML 5, conçue pour aider les utilisateurs à utiliser des applications Web sans programme réseau.
Fonctions hors ligne HTML 5, notamment [Cache de ressources hors ligne], [Surveillance de l'état en ligne] et [Stockage de données locales].

Mise en cache des ressources hors ligne : mettez en cache les ressources en ligne localement via le mécanisme du navigateur. Lorsque les utilisateurs accèdent à l'application hors ligne, ces fichiers de ressources sont automatiquement chargés depuis le local, permettant aux utilisateurs d'utiliser des applications.
Surveillance de l'état en ligne - Certaines applications doivent interagir avec le serveur pour certaines données. Les développeurs d'applications doivent savoir si le navigateur est en ligne. HTML 5 fournit une surveillance de l'état en ligne. (window.online = function(){})
Stockage de données locales - Lorsque l'application est hors ligne, le programme doit stocker localement les données générées par l'utilisateur afin qu'elles puissent être utilisé la synchronisation en ligne avec le serveur. À cette fin, HTML 5 fournit une variété de mécanismes de stockage local.

Par rapport aux applications Web ordinaires, les applications Web hors ligne disposent d'un fichier de description supplémentaire pour répertorier les ressources qui [doivent être mises en cache] et [ne sont jamais mises en cache]. L'extension du fichier est [.appcache] et le type MIME du fichier de description est "text/cache-manifest".

Le code du fichier offline.appcache est le suivant

CACHE MANIFEST
#cache 之后的资源都会被缓存
CACHE:
main.html
style.css
main.js
#network 之后的资源不会被缓存，总是从线上获取
NETWORK:
account/

Copier après la connexion

Si vous souhaitez mettre l'application hors ligne, il vous suffit d'associer le . fichier html avec le fichier de description du manifeste

<html manifest="./offline.appcache"></html>

Copier après la connexion

2.LocalStorage (stockage local) et SessionStorage (stockage de session)

Inconvénients de cookies

Taille limitée - Sous les navigateurs standards, la taille d'un seul cookie est de 4 Ko.
Consommation de performances - toutes les requêtes http sous le domaine actuel porteront ces données de cookies.

L'espace de stockage local de HTML5 est alloué pour chaque site Web [5 Mo]

La différence entre LocalStorage et SessionStorage
Les premiers seront stockés localement jusqu'à ce qu'ils soient effacés manuellement ;
Les seconds survivront au cycle de vie de la page actuelle. Une fois la page fermée, les données stockées disparaîtront également.