HTML5 オフラインストレージと Cookie ストレージの分析-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 オフラインストレージと Cookie ストレージの分析

小云云

Nov 18, 2017 pm 01:18 PM

cookiehtml5ストレージ

クッキー (「クッキー」) とは何ですか?簡単に言うと、Cookie はサーバーがユーザーのコンピューターを識別するために使用できるように、サーバーがユーザーのコンピューターに一時的に保存する情報 (.txt 形式のテキストファイル) です。 Web サイトを閲覧すると、Web サーバーはまず少量のデータをコンピュータに送信し、Web サイト上で行ったテキストや選択内容を記録します。次回同じ Web サイトにアクセスすると、Web サーバーは最初に前回残した Cookie 情報があるかどうかを確認し、存在する場合は Cookie の内容に基づいてユーザーを判断し、特定の Web ページのコンテンツを送信します。。 HTML5 が登場する前は、ログインユーザー情報や検索履歴情報などの一部のデータをブラウザ側でキャッシュするために Cookie を使用していました。ただし、Cookie でサポートされる容量は 4K のみであり、操作のための専用 API はなく、Cookie 情報の保存と取得には Cookies.js が使用されます。

// 这是一个cookie值Cookies.set(&#39;key&#39;, &#39;value&#39;);
// 链式调用Cookies.set(&#39;key&#39;, &#39;value&#39;).set(&#39;hello&#39;, &#39;world&#39;);
// 可以额外设置一些参数Cookies.set(&#39;key&#39;, &#39;value&#39;, { domain: &#39;www.example.com&#39;, secure: true });
// 设置缓存时间Cookies.set(&#39;key&#39;, &#39;value&#39;, { expires: 600 });
// Expires in 10 minutesCookies.set(&#39;key&#39;, &#39;value&#39;, { expires: &#39;01/01/2012&#39; });
Cookies.set(&#39;key&#39;, &#39;value&#39;, { expires: new Date(2012, 0, 1) });
Cookies.set(&#39;key&#39;, &#39;value&#39;, { expires: Infinity });// 获取Cookies.get(&#39;key&#39;);

Cookie ストレージの使用にはいくつかの欠点があることがわかります:

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

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

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

WEB Storage

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

localStorage.setItem(&#39;key&#39;, &#39;value&#39;);
localStorage.getItem(&#39;key&#39;);
localStorage.removeItem(&#39;key&#39;);
sessionStorage.setItem(&#39;key&#39;, &#39;value&#39;);
sessionStorage.getItem(&#39;key&#39;);
sessionStorage.removeItem(&#39;key&#39;);

sessionStorage の使用法と機能。唯一の違いは、sessionStorage はセッション内でのみ有効であり、ブラウザウィンドウが閉じられると、sessionStorage のキャッシュデータは自動的にクリアされますが、localStorage は手動でクリアされない限り永続的にローカルに保存されることです。。

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

HTML5 オフラインストレージと Cookie ストレージの分析

OFFLINE（オフライン）

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

サービスワーカー

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

このようにして、ブラウザベースのオフラインアプリケーションを開発できます。これにより、Web アプリケーションのネットワークへの依存度が低くなります。例えば、ニュース閲覧Webアプリケーションを開発しましたが、これをモバイルブラウザで開くと、ネットワークがあれば普通にニュースコンテンツを取得できます。ただし、携帯電話が機内モードになると、このアプリは使用できなくなります。

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

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

HTML5 オフラインストレージと Cookie ストレージの分析

サービス作業デモ

<!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>

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

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&#39;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&#39;t bother waiting, respond already.
                    return response;
                });
            });
        }).catch(function() {            // Connection is down? Simply fallback to a pre-cached page.
            return caches.match("/fallback.html");
        });
    );
};

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

もちろん、Service Worker の機能は現在よりもはるかに充実しています。

indexedDB

indexedDB は、データのクエリ速度が非常に速く、js オブジェクトを直接保存することができます。インデックス作成、トランザクション処理、堅牢なクエリ機能など、Web SQL (sqlite) よりも効率的です。 IndexedDB の機能:

1. Web サイトには 1 つ以上の IndexedDB データベースがあり、各データベースには一意の名前が必要です。

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

一个对象存储(由一个名称惟一标识)是一个记录集合。每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。

基本使用方式如下：

var openRequest = indexedDB.open("auto_people", 3);var db; //数据库对象openRequest.onupgradeneeded = function(e)
{    console.log("Running onupgradeeded...");	var thisDB = e.target.result;	if(!thisDB.objectStoreNames.contains("people")){
thisDB.createObjectStore("people", {autoIncrement:true}); //新建一个store并设置主键自增长
}
}//创建成功openRequest.onsuccess = function(e){    console.log("success!");
   db = e.target.result;	//Listen for add clicks}
openRequest.onerror = function(e){	console.log("error!");	console.dir(e);
}//这应该站在别的地方处理，这是做一个代码展示var transaction = db.transaction([&#39;people&#39;], "readwrite"); 
//创建一个连接var store = transaction.objectStore("people");  //获取storevar request = store.add({
   name: &#39;myron&#39;,
   email: &#39;test@qq.com&#39;,
   created: new Date()
}); //添加信息request.onerror = function(e){
   alert(&#39;error!&#39;);    console.dir(e);
} //当添加失败时调用request.onsuccess = function(e){    console.log(&#39;Did it!&#39;);
} //添加成功时调用request = store.get(1);  //获取第一条数据request.onsuccess = function(e)
{    var result = e.target.result;    console.dir(result);    if(result){        //拿到存储的对象
}
}

以上内容就是cookie和HTML5离线存储的分析，大家都了解了吗？

相关推荐：

如何区别html5离线存储和本地缓存实例详解

HTML5离线存储原理

html5的离线存储问题汇总

以上がHTML5 オフラインストレージと Cookie ストレージの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか？Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

See all articles