導入フロントエンドを深く知るにつれて、Cookie、LocalStorage など、多くのブラウザ ストレージ ソリューションについて学びました。これらのストレージ ソリューションの類似点と相違点は何ですか。また、それぞれの適用可能なシナリオは何ですか。 クッキークッキーのソース クッキーはもともとローカルストレージ用ではなく、ユーザーを識別するために作成されました。ご存知のとおり、Http プロトコルはステートレスです。つまり、サーバーに送信するすべてのリクエストはサーバーに分離され、サーバーはこれらのリクエストの送信元を認識しません。たとえば、ショッピング カートにいくつかのアイテムを追加したが、チェックアウト要求を送信したときにサーバーが混乱しました。どうすれば、あなたが誰で、何を購入したかを知ることができるでしょうか? Cookie を使用すると、サーバーは Cookie をチェックすることで送信元ユーザーを判別できます。ある意味で、Cookie はリクエストの ID カードであると言えます。リクエストが誰から送信されたかをサーバーに伝えることができます。 クッキーとは百聞は一見に如かず。クッキーがどんなものか見てみましょう これは、Baidu のホームページで使用される Cookie です。ご覧のとおり、Cookie は名前と値のペアとしてブラウザに保存され、値は明らかに暗号化されたデータです。 クッキー生成方法このクッキーはドメイン名、つまりBaiduホームページのクッキーに属します。ドメイン属性から、最初の2つのクッキーが.baidu.comに属していることがわかります。 各ドメイン名は、自身のドメイン名の Cookie のみを設定およびアクセスできます。たとえば、baidu.com はドメイン sougou.com の Cookie にアクセスできません。ただし、サブドメインは親ドメインによって設定された Cookie を読み取ることができます。たとえば、スクリーンショットでは、www.baidu.com は Domain='.baidu.com' の Cookie を読み取ります。Domain を手動で設定することで、親ドメインの Cookie を設定できます。たとえば、www.baidu.com は Domain='baidu.com' を設定することで、*.baidu.com のすべてのサブドメインも、設定した Cookie を読み取ることができます。 //www.baidu.com document.cookie='年齢=20;ドメイン=.baidu.com' // 現時点では、すべての第2レベルドメイン名はこのCookieを直接読み取ることができます クッキーは、サーバー側での生成とブラウザ側での生成の 2 つの方法で生成されます。 サーバー側 - HTTPレスポンスヘッダーにset-cookieを設定する レスポンス ヘッダーの Set-Cookie を通じて保存する Cookie 値を指定できます。リクエストがブラウザに戻ると、ブラウザはヘッダーの set-cookie 値に従って Cookie を設定します。デフォルトでは、ドメインは Cookie を設定するページのホスト名に設定されます。もちろん、ドメイン値を手動で設定することもできます。
browser-jsでは、document.cookieを通じてクッキーを読み書きし、キーと値のペアの形式で表示することができます。 ドキュメント.cookie="id=a3fWa" document.cookie='年齢=20;ドメイン=.baidu.com' クッキーの適用シナリオクッキーの機能は、リクエストの送信元をサーバーに伝えることであるため、主な機能はユーザーのログイン状態を維持すること(パスワードを記憶すること)です。さらに、ユーザーの閲覧データ、プッシュ広告、前述のショッピングカートを記録することもできます。 クッキーのデメリット実際、前回の記事では欠点が非常に明白です。 大きさが足りない クッキーはリクエストごとに送信されるため、クッキーには厳密なサイズ制限が必要です。各クッキーのサイズは 4kb に制限されています。4kb は名前と値のサイズを指し、このドメインに設定できるクッキーの合計サイズが 4kb のみであるという意味ではないことに注意してください。 パフォーマンスの欠点 クッキーはドメイン名に従い、同じドメイン名へのリクエストごとに送信されます。ただし、画像などの静的リソースのリクエストなど、大量のリクエストにはクッキーはまったく必要ありません。各クッキーはわずか 4kb ですが、少量でも大量のリソースが無駄になります。 静的リソースを CDN に配置することができます。このとき、画像のドメイン名はメインサイトのドメイン名とは異なり、Cookie は送信されません。 十分に安全ではない コンソールを直接開くとクッキーを見ることができるのと同様に、クッキーはエンコードによって暗号化されているものの、HTTP 転送時にはプレーンテキストで転送されます。スクリプトでも簡単にクッキーを取得できるため、非常に簡単に解読されてしまいます。 サーバー側でクッキーを設定する場合は、ブラウザがdocument.cookieを使用してクッキーにアクセスできないようにHttpOnlyタグを添付します。
「セキュア」とマークされた Cookie は、Https プロトコルの暗号化されたリクエストを通じてのみ送信される必要がありますが、Cookie は本質的に安全ではなく、これら 2 つのタグでは明確なセキュリティ保証を提供できないため、機密情報を保存するために Cookie を使用しないでください。 回避策Cookie には多くの欠点がありますが、恒久的な解決策はあるのでしょうか? それは、「プロの人がプロの仕事をする」ということです。 ユーザーのログイン状態と一部のユーザー情報を保存するタスクは、Seesion に引き継がれます。つまり、Cookie は一意のユーザー識別子を保存するためだけに使用され、実際の情報はサーバー側に保存されます。Cookie は、サーバー上の情報を検索するための SeesionID として使用されます。この方法では、Cookie の容量制限とセキュリティの問題が解決されます。この時点では、Cookie には意味のないランダム コードの文字列が含まれているためです。 ローカル ストレージの役割は、HTML5 の新しいローカル ストレージ ソリューション「Web Storage」に引き継がれ、localStorage と SessionStorage の 2 つのカテゴリに分かれています。次に、この 2 つの兄弟を紹介します。 ローカルストレージ特徴
使用例LocalStorage は非常に便利です: // データを設定する localStorage.setItem("key","value"); //データを読み取る let valueLocal = localStorage.getItem("key"); 使用シナリオ上記の機能から、LocalStorage はローカル キャッシュに非常に適しており、最初の画面の読み込み速度を向上させることができることがわかります。画像など、頻繁に変更されない大きなリソースもキャッシュして、ネットワーク要求を削減できます。 セッションストレージ特徴
使用シナリオsessionStorage は、それと同期されるライフサイクルおよびセッション レベルの情報を保存するのに適しています。この情報は現在のセッションにのみ適用されます。たとえば、フォーム データを永続化して、更新後にフォーム データが失われないようにするために使用できます。 Cookie、LocalStorage、SessionStorage の違い範囲の違いこれら 3 つはすべてプロトコルに従います。つまり、同じプロトコル、同じドメイン名、同じポートで同じデータにアクセスして変更できます。唯一の違いは、SeesionStorage でも同じウィンドウが必要であることです。 ライフサイクルの違い
要約するこれらはいくつかのブラウザ ストレージ ソリューションです。もちろん、各ソリューションの特性に基づいて、どのソリューションをいつ使用するかを決定する必要があります。最も適したものが最適です。この記事の要点をまとめる
上記はJSブラウザが保存する内容の詳細な説明です。JSブラウザの保存に関する詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Winows Server 2019 アクティベーション コードとボリューム ライセンス エディション KMS インストール キー GVLK
>>: MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策
今日は、CSS を使用してアニメーションの再生と一時停止を制御する非常に簡単なトリックを紹介します。...
数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...
この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...
目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...
今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...
1. 単一テーブルクエリ -> 更新 テーブル名の更新 フィールド1=新しい値1、フィールド2...
この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...
1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...
1. provideとinjectの説明Provide と Inject により、ネストされたコンポ...
まずプロジェクトの成果物を構成するスタートアップ項目の設定 Tomcatサービスを作成する開始したい...
目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...
目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...
この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...
まず、MySQL のバージョンについて説明します。 mysql> バージョンを選択します();...