ホームページ > 記事 > ウェブフロントエンド > html5オフラインストレージの知識を詳しく解説

html5オフラインストレージの知識を詳しく解説

小云云オリジナル: 2017-12-05 16:22:163357ブラウズ

STORAGE (ストレージ)

HTML5以前は、ログインユーザー情報や検索履歴情報などの一部のデータをブラウザ側でキャッシュするためにCookieを使用していました。ただし、Cookie によってサポートされる容量は 4K のみであり、操作のための専用の API はなく、Cookie 情報の保存と取得には Cookies.js が使用されます。 Cookie を使用して保存する方法はいくつかあります。欠点:

保存されるデータの量が比較的少ない

それを操作するための便利な API がない

Cookie 情報は http リクエスト中にリクエストヘッダーに追加されます。安全ではなく、帯域幅も増加します。

WEB Storage

HTML5 は、より優れたローカルストレージ仕様 localStorage と sessionStorage を提供します。これらは、データをローカルに保存し、http リクエスト中にストレージ内の情報を運びません。使い方も非常に簡単です:

// 这是一个cookie值
Cookies.set('key', 'value');

// 链式调用
Cookies.set('key', 'value').set('hello', 'world');

// 可以额外设置一些参数
Cookies.set('key', 'value', { domain: 'www.example.com', secure: true });

// 设置缓存时间
Cookies.set('key', 'value', { expires: 600 }); // Expires in 10 minutes
Cookies.set('key', 'value', { expires: '01/01/2012' });
Cookies.set('key', 'value', { expires: new Date(2012, 0, 1) });
Cookies.set('key', 'value', { expires: Infinity });

// 获取
Cookies.get('key');

sessionStorage の使用法と特徴と localStorage は基本的に同じです。唯一の違いは、sessionStorage がセッション内でのみ有効であるのに対し、sessionStorage のキャッシュされたデータは、そうでない限りローカルに永続的に保存されることです。手動でクリアされました。

Cookie、localStorage、sessionStorageの違いを分析した画像です

OFFLINE（オフライン） html5オフラインストレージの知識を詳しく解説

Webアプリにネイティブアプリと同じ機能と体験を持たせるために、HTML5に追加されました仕様多くの新しい API により、オフライン環境でもページに通常どおりアクセスできるようになります。 Service Worker と IndexedDB を併用すると、オフラインで使用する Web アプリを開発できます。Service Worker の互換性は現状あまり良くないため、ここでは以前のソリューションのアプリケーションキャッシュを紹介します。

Service Worker

Service Worker は、Web Worker に基づいたイベント駆動型であり、その実行メカニズムは、以前に直接処理できなかった追加のタスクを処理するために新しいスレッドを開くことです。 Web Worker の場合、ブラウザのメインスレッドのレンダリングをブロックしないため、これを使用して複雑な計算を実行できます。 Service Worker については、ローカルプロキシに相当するローカルキャッシュに使用できます。キャッシュといえば、静的リソースをキャッシュするために一般的に使用されるいくつかのキャッシュテクノロジが思い浮かびますが、古い方法はデバッグをサポートしておらず、あまり柔軟性がありません。 Service Worker をキャッシュに使用すると、JavaScript コードを使用してブラウザの http リクエストをインターセプトし、キャッシュされたファイルを設定し、Web サーバーを経由せずに直接それを返すなど、やりたいことをさらに実行できます。このようにして、ブラウザベースのオフラインアプリケーションを開発できます。これにより、Web アプリケーションのネットワークへの依存度が低くなります。例えば、ニュース閲覧Webアプリケーションを開発しましたが、これをモバイルブラウザで開くと、ネットワークがあれば普通にニュースコンテンツを取得できます。ただし、携帯電話が機内モードになると、このアプリは使用できなくなります。

キャッシュに Service Worker を使用する場合、ブラウザーの http リクエストは最初に Service Worker を通過し、URL マッピングを通じて照合され、照合が失敗した場合は、キャッシュされたデータが使用されます。実行されました。通常の状況では、一致に失敗すると、ページに「Web ページを開けません」と表示されます。

サービス作業ライフサイクル

サービス作業デモ

localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');

sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');

このjsは、サービスワーカーがページに正常に登録されると呼び出されます

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script>
        navigator.serviceWorker.register("/service-worker.js").then(function(serviceWorker) {
            console.log("success!");
        });
    </script>
  </head>
  <body>
  </body>
</html>

サービスワーカーはイベントリスニングメカニズムを使用し、上記のコードは、インストールイベントとフェッチイベントをリッスンします。サーバーワーカーが正常にインストールされると、このメソッドが呼び出され、ページのリソースファイルがキャッシュされます。サーバーワーカーは、ユーザーリクエストにより、リクエストされたファイルがキャッシュにヒットすると、キャッシュからファイルを取得してページに戻ります。これにより、オフラインの目的を達成することができます。サーバーを経由する必要はありません。

もちろん、Service Worker の機能は現在よりもはるかに優れています

indexedDB

indexedDB は、データをローカルに保存するために使用される nosql データベースであり、データのクエリ速度が非常に速く、js オブジェクトを直接保存できます。インデックス作成、トランザクション処理、堅牢なクエリ機能など、Web SQL (sqlite) よりも効率的です。 IndexedDB の機能: 1. Web サイトには 1 つ以上の IndexedDB データベースがあり、各データベースには一意の名前が必要です。

2. データベースには 1 つ以上のオブジェクトストアを含めることができます。

オブジェクトストア (名前によって一意に識別される) はレコードのコレクションです。各レコードにはキーと値があります。値は、1 つ以上のプロパティを持つことができるオブジェクトです。キーは、キージェネレータに基づくことも、キーパスから派生することも、明示的に設定することもできます。一意の連続した正の整数を自動的に生成するキージェネレーター。キーパスはキー値へのパスを定義します。単一の JavaScript 識別子、またはピリオドで区切られた複数の識別子を指定できます。

基本的な使い方は以下の通りです:

this.oninstall = function(e) {
    var resources = new Cache();
    var visited = new Cache();
    // Fetch them.
    e.waitUntil(resources.add(
        "/index.html",
        "/fallback.html",
        "/css/base.css",
        "/js/app.js",
        "/img/logo.png"
    ).then(function() {
        // Add caches to the global caches.
        return Promise.all([
            caches.set("v1", resources),
            caches.set("visited", visited)
        ]);
    }));
};

this.onfetch = function(e) {
    e.respondWith(
        // Check to see if request is found in cache
        caches.match(e.request).catch(function() {
            // It's not? Prime the cache and return the response.
            return caches.get("visited").then(function(visited) {
                return fetch(e.request).then(function(response) {
                    visited.put(e.request, response);
                    // Don't bother waiting, respond already.
                    return response;
                });
            });
        }).catch(function() {
            // Connection is down? Simply fallback to a pre-cached page.
            return caches.match("/fallback.html");
        });
    );
};

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

上記の内容は、HTML5 オフラインストレージの知識を詳しく説明したものであり、皆様のお役に立てれば幸いです。

html5オフラインストレージの知識を詳しく解説

関連記事