Implémentation de l'application hors ligne HTML5 et du stockage client-tutoriel HTML-php.cn

Cet article présente principalement les informations pertinentes sur la mise en œuvre de l'application hors ligne HTML5 et du stockage client. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

La prise en charge du développement d'applications Web hors ligne est un autre objectif de HTML5. Les applications Web dites hors ligne sont des applications qui peuvent toujours fonctionner même lorsque l'appareil ne peut pas accéder à Internet.

Développer des applications Web hors ligne nécessite plusieurs étapes. La première consiste à s’assurer que l’application sait si l’appareil a accès à Internet afin qu’elle puisse ensuite prendre les mesures appropriées. Ensuite, l’application doit également avoir accès à certaines ressources (images, Javascript, CSS, etc.) pour fonctionner correctement. Mieux encore, il doit y avoir un espace local permettant aux utilisateurs de sauvegarder leurs données, et la lecture et l'écriture ne seront pas gênées, qu'ils aient ou non accès à Internet.

HTML5 et ses API associées font du développement d'applications hors ligne une réalité.

Détection hors ligne

Pour savoir si l'appareil est en ligne ou hors ligne, HTML5 définit un attribut navigator.onLine Si cette valeur d'attribut est vraie. , cela signifie que l'appareil peut accéder à Internet. Une valeur false indique que l'appareil est hors ligne.

if (navigator.onLine) {
    // 正常工作
} else {
    // 执行离线状态时的任务
}

Copier après la connexion

En raison de certains problèmes de compatibilité avec navigator.onLine, en plus de la propriété navigator.onLine, afin de mieux déterminer si le réseau est disponible , HTML5 définit également deux événements, en ligne et hors ligne.

Ces deux événements sont déclenchés sur l'objet fenêtre lorsque le réseau bascule entre hors ligne et en ligne :

window.addEventListener(&#39;online&#39;, function() {
    // 正常工作
});

window.addEventListener(&#39;offline&#39;, function() {
    // 执行离线状态时的任务
});

Copier après la connexion

Dans les applications pratiques, il Il est préférable d'obtenir l'état initial via navigator.onLine après le chargement de la page. Utilisez ensuite les deux événements ci-dessus pour déterminer si l'état de la connexion réseau change. Lorsque l'événement ci-dessus est déclenché, la valeur de la propriété navigator.onLine change également, mais cette propriété doit être interrogée manuellement pour détecter les changements dans l'état du réseau.

Cache d'application

Le cache d'application HTML5, ou appcache en abrégé, est spécialement conçu pour développer des applications Web hors ligne. Appcache est une zone de cache séparée du cache du navigateur. Pour enregistrer des données dans ce cache, utilisez un fichier manifeste qui répertorie les ressources à télécharger et à mettre en cache. Exemple de fichier de description :

CACHE MANIFEST
# Comment

file.js
file.css

Copier après la connexion

Puis cité en html :

<html manifest="./xxx.manifest">

Copier après la connexion

Le type MIME du fichier xxx.manifest doit être texte/cache-manifest.

Le cœur de cette API est l'objet applicationCache. Cet objet a un attribut de statut. La valeur de l'attribut est une constante, indiquant l'état actuel suivant du cache de l'application :

0 : Aucun Cache, c'est à dire qu'il n'y a pas de cache d'application associé à la page
1 : Idle, c'est à dire que le cache d'application n'a pas été mis à jour
2 : Vérification, c'est-à-dire télécharger le fichier de description et vérifier les mises à jour
3 : Téléchargement, c'est-à-dire que le cache de l'application télécharge les ressources spécifiées dans le fichier de description
4 : Mise à jour terminée, c'est-à-dire que le cache de l'application a mis à jour les ressources et que toutes les ressources ont été téléchargées et peuvent être utilisées via swapCache()
5 : Obsolète, c'est-à-dire que le fichier de description du cache de l'application n'est plus disponible, la page ne peut donc plus accéder au cache de l'application

Événements associés :

vérification : déclenchée lorsque le navigateur recherche des mises à jour dans le cache de l'application
erreur : déclenchée lorsqu'une erreur se produit lors de la vérification des mises à jour ou du téléchargement de ressources
noupdate : Déclenché lors de la vérification du fichier de description et ne trouvant aucune modification dans le fichier
téléchargement : Déclenché lors du démarrage du téléchargement des ressources du cache de l'application
progression : Déclenché en continu pendant le processus de téléchargement du fichier cache de l'application
updateready : Déclenché lorsque le nouveau cache d'application de la page a été téléchargé et peut être utilisé via swapCache()
cached : Déclenché lorsque le cache de l'application est entièrement disponible

De manière générale, ces événements seront déclenchés dans le ordre ci-dessus au fur et à mesure du chargement de la page. Les événements ci-dessus peuvent également être déclenchés manuellement en appelant la méthode update().

Stockage de données

Le cookie HTTP, généralement appelé cookie directement, est utilisé par le client La fin est utilisée pour stocker les informations de session. La norme exige que les serveurs envoient l'en-tête HTTP Set-Cookie dans le cadre de la réponse à toute requête HTTP contenant des informations de session. Exemple d'en-tête de réponse du serveur :

HTTP/1.1 200 OK
Content-type : text/html
Set-Cookie : name=value
Autre-en-tête : autre-en-tête- value

Ensuite, le navigateur définit les informations de session du Cookie, puis ajoute l'en-tête HTTP Cookie à chaque demande pour renvoyer les informations au serveur, comme suit :

GET / index.html HTTP/1.1
Cookie : nom=valeur
Autre-en-tête : autre-en-tête-valeur

Les informations complémentaires renvoyées au serveur peuvent être utilisées pour de manière unique authentifier le client à partir duquel la demande a été envoyée.

Un cookie complet comprend :

Nom : Un nom qui identifie de manière unique le cookie. Doit être codé en URL.
valeur : la valeur de chaîne stockée dans le cookie. Doit être codé en URL.
域： cookie 对于哪个域是有效的。
路径：对于指定域中的那个路径，应该向服务器发送 cookie。
失效时间：表示 cookie 何时应该被删除的时间戳。
安全标志：指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。

复制代码

代码如下:

Set-Cookie：name=value; domain=www.laixiangran.cn; path=/; expires=Mon, 29 Oct 2018 03:53:10 GMT; secure;

Copier après la connexion

基本用法

在 JavaScript 中操作 cookie 有些复杂，这是因为 document.cookie 属性在不同的使用方式中表现出不同的行为。

当用来获取属性值时，document.cookie 返回当前页面可用的所有 cookie 字符串，一系列由分号隔开的键值对，如下所示：

document.cookie
// name1=value1;name2=value2;name3=value3;

Copier après la connexion

当用来设置值时，document.cookie 属性会设置一个新的 cookie 字符串添加到现有的 cookie 集合中，并不会像普通对象设置属性一样覆盖原 cookie 的值，除非设置的 cookie 的名称已经存在，如下所示：

// cookie 的名称不存在
document.cookie = &#39;name4=value4&#39;
// name1=value1;name2=value2;name3=value3;name4=value4;
// 而不是 name4=value4;
// cookie 的名称存在
document.cookie = &#39;name3=value4&#39;
// name1=value1;name2=value2;name3=value4;

Copier après la connexion

从上面的代码我们可以看出，我们要读取或者修改或者删除指定 cookie 的值都不是很直观方便，因此我们可以封装一些方法，方便我们对 cookie 的操作：

var CookieUtil = {

    get: function (name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd;

        if (cookieStart > -1) {
            cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }

        return cookieValue;
    },

    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }

        if (path) {
            cookieText += "; path=" + path;
        }

        if (domain) {
            cookieText += "; domain=" + domain;
        }

        if (secure) {
            cookieText += "; secure";
        }

        document.cookie = cookieText;
    },

    unset: function (name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

Copier après la connexion

使用方法：

// 设置 cookie
CookieUtil.set(&#39;name&#39;, &#39;lai&#39;);
CookieUtil.set(&#39;sex&#39;, &#39;man&#39;);

// 读取 cookie
CookieUtil.get(&#39;name&#39;); // &#39;lai&#39;
CookieUtil.get(&#39;sex&#39;); // &#39;man&#39;

// 删除 cookie
CookieUtil.unset(&#39;name&#39;);
CookieUtil.unset(&#39;sex&#39;);

// 设置 cookie，包括它的路径、域、失效日期
CookieUtil.set(&#39;name&#39;, &#39;lai&#39;, &#39;/&#39;, &#39;www.laixiangran.cn&#39;, new Date());

Copier après la connexion

大小限制

每个域的 cookie 总数是有限，不同浏览器之间所有不同，IE6 以下是最多 20 个，IE7 以上最多 50 个，Firefox最多 50 个，Opera 最多 30 个，Safari 和 Chrome 不限制。
cookie 的尺寸也有限制，大多数浏览器有大约 4096B。

Web Storage

Web Storage 的目的是克服由 cookie 带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage 的两个主要目标是：
提供一种在 cookie 之外存储会话数据的路径。
提供一种存储大量可以跨会话存在的数据的机制。

Web Storage 主要定义了两种对象：sessionStorage 和 localStorage，是 Storage 对象的实例，这两个对象区别如下：

sessionStorage：存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。存储数据大小大多数限制在 2.5M，少数浏览器限制在 5M 或者不限制。
localStorage：数据保存到通过 JavaScript 删除或者是用户清除浏览器缓存。存储数据大小大多数限制在 5M，少数浏览器限制在 2.5M 或者不限制。

Storage 类型有如下方法：

clear()：删除所有值。
getItem(name)：根据指定的名字 name 获取对应的值。
key(index)：获取 index 位置处的值的名字。
removeItem(name)：删除由 name 指定的键值对。
setItem(name, value)：为指定的 name 设置一个对应的值，值为字符串。

对 sessionStorage 和 localStorage 进行操作都会触发 storage 事件，该事件对象有以下属性：

domain：发生变化的存储空间的域名。
key：设置或者删除的键名。
newValue：如果是设置值，则是新值；如果是删除键，则是null。
oldValue：键被更改之前的值。

IndexedDB

Indexed Database API，简称为 IndexedDB，是在浏览器中保存结构化数据的一种数据库。其思想是创建一套 API，方便保存和读取 JavaScript 对象，同时还支持查询和搜索。

IndexedDB 设计的操作完全是异步进行的。因此，大多数操作会以请求方式进行。

基本用法

var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB, // 获取 indexedDB
    request,
    store,
    database,
    users = [
        {
            username: "007",
            firstName: "James",
            lastName: "Bond",
            password: "foo"
        },
        {
            username: "ace",
            firstName: "John",
            lastName: "Smith",
            password: "bar"
        }
    ];

// 打开数据库
request = indexedDB.open("example");

// 注册 onerror 及 onsuccess 事件
request.onerror = function (event) {
    alert("Something bad happened while trying to open: " + event.target.errorCode);
};
request.onsuccess = function (event) {
    database = event.target.result;
    
    // 操作数据库
    initializeDatabase();
};

function initializeDatabase() {
    if (database.version != "1.0") {
    
        // 设置数据库版本号
        request = database.setVersion("1.0");
        request.onerror = function (event) {
            alert("Something bad happened while trying to set version: " + event.target.errorCode);
        };
        request.onsuccess = function (event) {
        
            // 使用 users 创建对象存储空间
            store = database.createObjectStore("users", {keyPath: "username"});
            var i = 0,
                len = users.length;

            while (i < len) {
            
                // 插入新值
                store.add(users[i++]);
            }

            alert("Database initialized for first time. Database name: " + database.name + ", Version: " + database.version);
        };
    } else {
        alert("Database already initialized. Database name: " + database.name + ", Version: " + database.version);
        
        // transaction() 创建事务，objectStore() 将存储空间传入事务
        request = database.transaction("users").objectStore("users").get("007");
        request.onsuccess = function (event) {
            alert(event.target.result.firstName);
        };
    }
}

Copier après la connexion

限制