HTTP はステートレスなので、あなたは誰ですか?あなたは何をしましたか？申し訳ありませんが、サーバーは知りません。
したがって、セッションが表示され、将来の使用に備えてサーバーにユーザー情報 (ユーザー名、ショッピング カートでの購入など) が保存されます。
ただし、セッションは一時的なものであり、ユーザーが Web サイトを離れると削除されます。情報を永続的に保存したい場合は、データベースに保存できます。
セッションの仕組み: ユーザーごとにセッション ID (コア!!!) を作成します。セッション ID は Cookie に保存されます。つまり、ブラウザが Cookie を無効にすると、セッションは無効になります。 (ただし、URL を通じてセッション ID を渡すなど、他の方法でも実現できます)
ユーザー認証には通常、セッションが使用されます。
クッキー:目的: Web サイトがユーザーを識別するために、クライアント側にローカルに保存されるデータ (通常は暗号化されます)。
Cookie は、同じオリジンからの http リクエスト内で (必要でない場合でも) 送信されます。つまり、クライアントとサーバーの間でやり取りされます。
Cookieのデータサイズは4kを超えません
Cookie の有効期間: 設定された Cookie の有効期間は、ブラウザを閉じても有効期限まで有効です。
ローカルストレージとセッションストレージ：初期の頃、Cookie はローカル キャッシュに一般的に使用されていましたが、Web ストレージはより安全で高速である必要があります。
このデータはサーバーには保存されない (クライアントに保存される) ため、サーバーのパフォーマンスには影響しません。
sessionStorage と localStorage データ ストレージにもサイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。
localStorage: 時間制限のないデータ ストレージ!
sessionStorage: 英語の意味からもわかるように、セッションのデータストレージなので、ユーザーがブラウザ（タブ/ウィンドウ）を閉じると、データは削除されます！
HTML5 Web ストレージのサポート:IE8 以降、最新のブラウザ。
データはキーと値のペアで保存されます。
localStorage と sessionStorage の両方に次のメソッドがあります。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換コンテンツ=ie=edge> <title>Web ストレージ</title></head><body> <div id=test></div> <script> if (typeof (ストレージ) != 未定義) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = あなたは次のとおりです: + localStorage.name最初: + localStorage.name1 + , + localStorage.key(0)); console.log(2 番目: + localStorage.name1); console.log(3 番目: + localStorage.getItem('name')); console.log(last: + localStorage.name); document.getElementById('test').innerHTML = ブラウザを更新してください。現在、ブラウザはストレージをサポートしていません。 } </script></body></html>プログラムの実行結果:
注: キーと値のペアは文字列として保存されるため、要件に応じて型を変更する必要があります (たとえば、加算の場合は Number 型に変更します)。
HTML5 アプリケーション キャッシュ:キャッシュ マニフェスト ファイルを作成すると、Web アプリケーションをキャッシュし、ネットワーク接続なしでアクセスできるようになります。
アプリケーション キャッシュの利点:1. オフラインでの閲覧。
2. 高速化: キャッシュされたリソースのロードが高速化されます。
3. ブラウザの負荷を軽減します。クライアントは、変更されたリソースのみをサーバーからダウンロードまたは更新します。
サポート状況:
IE10 以降、最新のブラウザ。
使用：
<!DOCTYPE html><html manifest=demo.appcache></html>
注: アプリケーション キャッシュを有効にするには、マニフェスト属性 (拡張子: .appcache) を指定する必要があります。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルでページが直接指定されていない限り)。
マニフェスト ファイルは、サーバー上で MIME タイプ: text/cache-manifest を使用して正しく構成されている必要があります。
マニフェストファイル:マニフェストは、何がキャッシュされ、何がキャッシュされないかをブラウザーに伝える単純なテキスト ファイルです。
マニフェストは 3 つの部分に分けることができます。キャッシュ マニフェスト: ここにリストされているファイルは、最初のダウンロード後にキャッシュされます。
ネットワーク: この項目にリストされているファイルはサーバーとのネットワーク接続を必要とするため、キャッシュされません。
FALLBACK: この項目には、ページにアクセスできない場合のフォールバック ページ (404 ページなど) がリストされます。
テスト.appキャッシュ:
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/ディレクトリ内のファイルにアクセスできない場合は、代わりに /offline.html を使用してください/html/ /オフライン.htmlアプリケーションキャッシュを更新します。
1. ユーザーがブラウザのキャッシュをクリアします。
2.マニフェストファイルを変更します（#:はコメントを示し、#2018 1 1 v20.0.0に変更するとブラウザが再キャッシュします！）
3. プログラムはアプリケーション キャッシュを更新します。
ウェブワーカー:Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。
一般的な HTML ページでスクリプトを実行する場合、スクリプトが読み込まれない限りページは応答しません。
サポート: IE10 以降、最新のブラウザー
例: html ファイル:
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換コンテンツ=ie=edge> <title>Web ワーカー</title></head><body> <p>カウント: <output id=count></output></p> <button onclick=startWorker()>Start</button> <button onclick=overWorker()>End</button> <script> var w; function startWorker(){ // ブラウザが Web ワーカーをサポートしているかどうかを確認します if(typeof(Worker) !=='undefine'){ if(typeof(w)=='unknown'){ //Web ワーカー オブジェクトを作成します w=new Worker('testWorker.js'); } // w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data }; 終了しない限り、イベントは (外部スクリプトが完了した場合でも) リッスンされ続けます。 ('count' ).innerHTML='ブラウザは Web ワーカーをサポートしていません' } } function overWorker() { // Web を終了します。ワーカー オブジェクト、ブラウザ/コンピューターのリソースを解放します w.terminate() } </script></body></html>testWorker.js ファイル:
var i=0;function timedCount() { i+=1; //重要な部分は、HTML ページに情報を返します。 setTimeout('timedCount()',500);}注 1: 通常、Web ワーカーはそのような単純なタスクには使用されず、より多くの CPU リソースを消費するタスクに使用されます。
注 2: Chrome で実行すると、「オリジン 'null' からアクセスできません」というエラーが発生します。私の解決策は、xampp で Apache を開き、http://localhost/ を使用してアクセスすることです。
Web ワーカーの欠点:Web ワーカーは外部ファイルに配置されているため、次の JavaScript オブジェクトにアクセスできません。
サーバー送信イベントは一方向の情報転送です。Web ページはサーバーから更新を自動的に取得できます。
以前: Web ページは最初に利用可能なアップデートがあるかどうかを尋ね、サーバーがデータを送信し、アップデートが行われました (双方向データ転送)。
サポート状況: IE を除くすべての最新ブラウザーがサポートしています。
サンプルコード：htmlファイル：
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換コンテンツ=ie=edge> <title>サーバー送信イベント</title></head><body> <p>サーバー送信イベント情報</p> <div id=test></div> <script> // ブラウザが EventSource をサポートしているかどうかを判断します if(typeof(EventSource)!==unknown){ // EventSource オブジェクトを作成します var source=new EventSource(test.php); //イベントリッスンsource.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> }; document.getElementById('test').innerHTML=申し訳ありませんが、ブラウザはサーバー送信イベントをサポートしていません。 } </script></body></html>テスト.php：
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:サーバー時間は次のとおりです: {$ time} /n/n;// 出力データを更新 flash();注: 背後にコンテンツはありません。php ファイルは省略できますか?> 閉じてください!
HTML5 Webソケット:WebSocketを使えば複数タブ間の通信が可能！
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。