HTML5オフラインアプリケーションとクライアントストレージの実装-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5オフラインアプリケーションとクライアントストレージの実装

不言

May 05, 2018 am 11:25 AM

h5html5クライアント

この記事は主に HTML5 オフラインアプリケーションとクライアントストレージの実装に関する関連情報を紹介しています。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

オフライン Web アプリケーション開発のサポートは、HTML5 のもう 1 つの焦点です。いわゆるオフライン Web アプリケーションは、デバイスがインターネットにアクセスできない場合でも実行できるアプリケーションです。

オフライン Web アプリケーションの開発には、いくつかの手順が必要です。 1 つ目は、次に正しいアクションを実行できるように、デバイスがインターネットにアクセスできるかどうかをアプリが認識していることを確認することです。さらに、アプリケーションが適切に動作するには、特定のリソース (画像、JavaScript、CSS など) にもアクセスできる必要があります。最も良いのは、ユーザーがデータを保存するためのローカル領域が必要であり、インターネットにアクセスできるかどうかに関係なく、読み取りと書き込みが妨げられないことです。

HTML5 とその関連 API により、オフラインアプリケーションの開発が現実になります。

オフライン検出

デバイスがオンラインかオフラインかを知るために、HTML5 は navigator.onLine 属性を定義します。値が true の場合はデバイスがインターネットにアクセスできることを示し、値が false の場合はデバイスがインターネットにアクセスできることを示します。オフラインです。

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

navigator.onLine 属性に加えて、navigator.onLine との互換性の問題により、ネットワークが利用可能かどうかをより適切に判断するために、HTML5 ではオンラインとオフラインの 2 つのイベントも定義されています。

ネットワークがオフラインとオンラインの間で切り替わるときに、次の 2 つのイベントがウィンドウオブジェクトでトリガーされます:

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

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

実際のアプリケーションでは、ページがロードされた後に navigator.onLine を通じて初期化を取得するのが最善です。次に、上記 2 つのイベントを使用して、ネットワーク接続ステータスが変化したかどうかを判断します。上記のイベントがトリガーされると、navigator.onLine プロパティの値も変更されますが、ネットワークステータスの変化を検出するには、このプロパティを手動でポーリングする必要があります。

アプリケーションキャッシュ

HTML5 のアプリケーションキャッシュ (略して appcache) は、オフライン Web アプリケーションの開発用に特別に設計されています。 Appcache は、ブラウザのキャッシュから分離されたキャッシュ領域です。このキャッシュにデータを保存するには、ダウンロードしてキャッシュするリソースをリストしたマニフェストファイルを使用できます。説明ファイルの例:

CACHE MANIFEST
# Comment

file.js
file.css

次に、HTML で引用します:

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

xxx.manifest ファイルの MIME タイプは text/cache-manifest である必要があります。

この API の中核は applicationCache オブジェクトです。このオブジェクトには status 属性があり、アプリケーションキャッシュの次の現在のステータスを示します。

0: キャッシュなし。ページに関連するアプリケーションキャッシュはありません
1

HTTP Cookie (通常は直接 Cookie と呼ばれます) は、クライアントにセッション情報を保存するために使用されます。この標準では、サーバーは、HTTP リクエストへの応答の一部として、セッション情報を含む Set-Cookie HTTP ヘッダーを送信する必要があります。サーバー応答ヘッダーの例: HTTP/1.1 200 OKContent-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 エンコードする必要があります。

Value: 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;

当用来设置值时，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;

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

使用方法：

// 设置 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());

大小限制

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

限制

和 Web Storage类似，只能由同源（相同协议、域名和端口）页面操作，因此不能跨域共享信息。
Firefox 大小上限为 50M，移动端的 Firefox 大小上限为 5M，不允许本地文件访问。
Chrome 大小上限为 5M，允许本地文件访问。

以上がHTML5オフラインアプリケーションとクライアントストレージの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。