Ausführliche Erläuterung der H5-Offline-Anwendung und der Client-Speichernutzung-HTML-Tutorial-php.cn

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von H5-Offline-Anwendungen und Client-Speicher geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von H5-Offline-Anwendungen und Client-Speicher? sehen.

Die Unterstützung der Offline-Entwicklung von Webanwendungen ist ein weiterer Schwerpunkt von HTML5. Bei den sogenannten Offline-Webanwendungen handelt es sich um Anwendungen, die auch dann noch ausgeführt werden können, wenn das Gerät keinen Zugriff auf das Internet hat.

Die Entwicklung von Offline-Webanwendungen erfordert mehrere Schritte. Zunächst muss sichergestellt werden, dass die App weiß, ob das Gerät über einen Internetzugang verfügt, damit sie als Nächstes die richtigen Maßnahmen ergreifen kann. Dann muss die Anwendung auch Zugriff auf bestimmte Ressourcen (Bilder, Javascript, CSS usw.) haben, um ordnungsgemäß zu funktionieren. Das Beste ist, dass es einen lokalen Speicherplatz für Benutzer zum Speichern von Daten gibt und das Lesen und Schreiben nicht behindert wird, unabhängig davon, ob sie Zugang zum Internet haben.

HTML5 und die zugehörigen APIs machen die Entwicklung von Offline-Anwendungen zur Realität.

Offline-Erkennung

Um zu wissen, ob das Gerät online oder offline ist, definiert HTML5 ein navigator.onLine-Attribut, wenn dieser Attributwert wahr ist bedeutet, dass das Gerät auf das Internet zugreifen kann. Der Wert „false“ zeigt an, dass das Gerät offline ist.

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

Nach dem Login kopieren

Aufgrund bestimmter Kompatibilitätsprobleme mit navigator.onLine definiert HTML5 zusätzlich zum navigator.onLine-Attribut auch zwei Ereignisse, online und offline, um besser feststellen zu können, ob das Netzwerk verfügbar ist.

Diese beiden Ereignisse werden auf dem Fensterobjekt ausgelöst, wenn das Netzwerk zwischen Offline und Online wechselt:

window.addEventListener('online', function() {
    // 正常工作
});
window.addEventListener('offline', function() {
    // 执行离线状态时的任务
});

Nach dem Login kopieren

In praktischen Anwendungen ist es am besten, den Navigator zuerst zu übergeben, nachdem die Seite geladen wurde. onLine erhält den Anfangszustand. Verwenden Sie dann die beiden oben genannten Ereignisse, um festzustellen, ob sich der Netzwerkverbindungsstatus ändert. Wenn das obige Ereignis ausgelöst wird, ändert sich auch der Wert der Eigenschaft navigator.onLine, diese Eigenschaft muss jedoch manuell abgefragt werden, um Änderungen im Netzwerkstatus zu erkennen.

Anwendungscache

Der Anwendungscache von HTML5, kurz Appcache, ist speziell für die Entwicklung von Offline-Webanwendungen konzipiert. Appcache ist ein Cache-Bereich, der vom Cache des Browsers getrennt ist. Um Daten in diesem Cache zu speichern, können Sie eine Manifestdatei verwenden, die die herunterzuladenden und zwischenzuspeichernden Ressourcen auflistet. Beispiel für eine Beschreibungsdatei:

CACHE MANIFEST
# Comment
file.js
file.css

Nach dem Login kopieren

Dann wird in HTML referenziert:

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

Nach dem Login kopieren

Der MIME-Typ der xxx.manifest-Datei muss text/cache-manifest sein.

Der Kern dieser API ist das applicationCache-Objekt. Dieses Objekt verfügt über ein Statusattribut. Der Wert des Attributs ist eine Konstante, die den folgenden aktuellen Status des Anwendungscaches angibt:

0: Kein Cache, d. h. der Seite ist kein Anwendungscache zugeordnet
1: Leerlauf, d. h. der Anwendungscache wurde nicht aktualisiert
2: Überprüfen, d. h. Herunterladen der Beschreibungsdatei und Suchen nach Updates
3: Herunterladen, d. h. der Anwendungscache lädt die in der Beschreibungsdatei angegebenen Ressourcen herunter
4: Update abgeschlossen, das heißt, der Anwendungscache hat die Ressourcen aktualisiert und alle Ressourcen wurden heruntergeladen und können über swapCache()
verwendet werden
5: Veraltet, das heißt, die Beschreibungsdatei des Anwendungscaches ist nicht mehr verfügbar, sodass die Seite nicht mehr auf den Anwendungscache zugreifen kann

Zugehörige Ereignisse:

Überprüfung: Wird ausgelöst, wenn der Browser nach Updates für den Anwendungscache sucht
Fehler: Wird ausgelöst, wenn beim Suchen nach Updates oder beim Herunterladen von Ressourcen ein Fehler auftritt
noupdate: Wird ausgelöst, wenn die Beschreibungsdatei überprüft und keine Änderungen an der Datei festgestellt werden
Downloading: Wird ausgelöst, wenn mit dem Herunterladen von Anwendungs-Cache-Ressourcen begonnen wird
Fortschritt: Kontinuierlich während des Prozesses des DateidownloadsAnwendungscache Ausgelöst
Updatebereit: Wird ausgelöst, wenn der neue Anwendungscache auf dem Seite wurde heruntergeladen und kann über swapCache() verwendet werden
gespeichert: Wird im Anwendungscache ausgelöst. Wird ausgelöst, wenn sie vollständig verfügbar ist

Im Allgemeinen gilt: Diese Ereignisse werden beim Laden der Seite in der oben genannten Reihenfolge ausgelöst. Die oben genannten Ereignisse können auch manuell durch Aufruf der update()-Methode ausgelöst werden.

Datenspeicherung

Cookie

HTTP Cookie，通常直接叫做 cookie，是在客户端用于存储会话信息的。该标准要求服务器对任意 HTTP 请求发送 Set-Cookie HTTP 头信息作为响应的一部分，其中包含会话信息。服务器响应头示例：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

然后浏览器 Set-Cookie 的会话信息，之后为每个请求添加 Cookie HTTP 头将信息发送回服务器，如下所示：

GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个请求。

完整的 cookie 包括：

名称：一个唯一确定 cookie 的名称。必须被 URL 编码。
值：存储在 cookie 中的字符串值。必须被 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;

基本用法

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

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

从上面的代码我们可以看出，我们要读取或者修改或者删除指定 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);
    }
};

Nach dem Login kopieren

使用方法：

// 设置 cookie
CookieUtil.set('name', 'lai');
CookieUtil.set('sex', 'man');
// 读取 cookie
CookieUtil.get('name'); // 'lai'
CookieUtil.get('sex'); // 'man'
// 删除 cookie
CookieUtil.unset('name');
CookieUtil.unset('sex');
// 设置 cookie，包括它的路径、域、失效日期
CookieUtil.set('name', 'lai', '/', 'www.laixiangran.cn', new Date());

Nach dem Login kopieren

大小限制

每个域的 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);
        };
    }
}

Nach dem Login kopieren

限制