JSブラウザストレージの詳しい説明

JSブラウザストレージの詳しい説明

導入

フロントエンドを深く知るにつれて、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 を設定するページのホスト名に設定されます。もちろん、ドメイン値を手動で設定することもできます。

Cookie の設定: id=a3fWa;

browser-jsでは、document.cookieを通じてクッキーを読み書きし、キーと値のペアの形式で表示することができます。

ドキュメント.cookie="id=a3fWa"
document.cookie='年齢=20;ドメイン=.baidu.com'

クッキーの適用シナリオ

クッキーの機能は、リクエストの送信元をサーバーに伝えることであるため、主な機能はユーザーのログイン状態を維持すること(パスワードを記憶すること)です。さらに、ユーザーの閲覧データ、プッシュ広告、前述のショッピングカートを記録することもできます。

クッキーのデメリット

実際、前回の記事では欠点が非常に明白です。

大きさが足りない

クッキーはリクエストごとに送信されるため、クッキーには厳密なサイズ制限が必要です。各クッキーのサイズは 4kb に制限されています。4kb は名前と値のサイズを指し、このドメインに設定できるクッキーの合計サイズが 4kb のみであるという意味ではないことに注意してください。

パフォーマンスの欠点

クッキーはドメイン名に従い、同じドメイン名へのリクエストごとに送信されます。ただし、画像などの静的リソースのリクエストなど、大量のリクエストにはクッキーはまったく必要ありません。各クッキーはわずか 4kb ですが、少量でも大量のリソースが無駄になります。

静的リソースを CDN に配置することができます。このとき、画像のドメイン名はメインサイトのドメイン名とは異なり、Cookie は送信されません。

十分に安全ではない

コンソールを直接開くとクッキーを見ることができるのと同様に、クッキーはエンコードによって暗号化されているものの、HTTP 転送時にはプレーンテキストで転送されます。スクリプトでも簡単にクッキーを取得できるため、非常に簡単に解読されてしまいます。

サーバー側でクッキーを設定する場合は、ブラウザがdocument.cookieを使用してクッキーにアクセスできないようにHttpOnlyタグを添付します。

Cookie の設定: id=a3fWa; HttpOnly

「セキュア」とマークされた Cookie は、Https プロトコルの暗号化されたリクエストを通じてのみ送信される必要がありますが、Cookie は本質的に安全ではなく、これら 2 つのタグでは明確なセキュリティ保証を提供できないため、機密情報を保存するために Cookie を使用しないでください。

回避策

Cookie には多くの欠点がありますが、恒久的な解決策はあるのでしょうか? それは、「プロの人がプロの仕事をする」ということです。

ユーザーのログイン状態と一部のユーザー情報を保存するタスクは、Seesion に引き継がれます。つまり、Cookie は一意のユーザー識別子を保存するためだけに使用され、実際の情報はサーバー側に保存されます。Cookie は、サーバー上の情報を検索するための SeesionID として使用されます。この方法では、Cookie の容量制限とセキュリティの問題が解決されます。この時点では、Cookie には意味のないランダム コードの文字列が含まれているためです。

ローカル ストレージの役割は、HTML5 の新しいローカル ストレージ ソリューション「Web Storage」に引き継がれ、localStorage と SessionStorage の 2 つのカテゴリに分かれています。次に、この 2 つの兄弟を紹介します。

ローカルストレージ

特徴

  • データは手動で削除されるまで長期間保存されます
  • サイズは約5M
  • クッキーと同様に、Web サイトは独自のドメイン名の下にあるデータにのみアクセスして操作できます。
  • クライアント側でのみ使用され、サーバー側との通信はありません
  • インターフェースのカプセル化の改善
  • キーと値のペアを使用して情報を保存する
  • 同じオリジンのウィンドウは、

使用例

LocalStorage は非常に便利です:

// データを設定する localStorage.setItem("key","value");
//データを読み取る let valueLocal = localStorage.getItem("key");

使用シナリオ

上記の機能から、LocalStorage はローカル キャッシュに非常に適しており、最初の画面の読み込み速度を向上させることができることがわかります。画像など、頻繁に変更されない大きなリソースもキャッシュして、ネットワーク要求を削減できます。

セッションストレージ

特徴

  • 保存時間はこのセッションのみ有効です。つまり、ウィンドウを閉じると保存時間は失われます。
  • このウィンドウのみがアクセスでき、同じソースを持つ他のウィンドウはアクセスできません。
  • 小さい約5M

使用シナリオ

sessionStorage は、それと同期されるライフサイクルおよびセッション レベルの情報を保存するのに適しています。この情報は現在のセッションにのみ適用されます。たとえば、フォーム データを永続化して、更新後にフォーム データが失われないようにするために使用できます。

Cookie、LocalStorage、SessionStorage の違い

範囲の違い

これら 3 つはすべてプロトコルに従います。つまり、同じプロトコル、同じドメイン名、同じポートで同じデータにアクセスして変更できます。唯一の違いは、SeesionStorage でも同じウィンドウが必要であることです。

ライフサイクルの違い

  • クッキーの有効期限は手動で設定できます。デフォルトは現在のセッションの期間です。ウィンドウを閉じるとクッキーは削除されます。有効期限が設定されると、有効期限までハードディスクに保存されます。
  • LocalStorage は、手動で削除しない限り常に存在する永続的なローカル ストレージです。
  • SessionStorage はセッション レベルのストレージであり、ウィンドウが閉じられると削除されます。

要約する

これらはいくつかのブラウザ ストレージ ソリューションです。もちろん、各ソリューションの特性に基づいて、どのソリューションをいつ使用するかを決定する必要があります。最も適したものが最適です。この記事の要点をまとめる

  • クッキーの役割はローカルストレージではなく、「状態を維持する」ことです
  • Web ストレージは、ブラウザストレージ専用に HTML5 によって提供されるデータストレージメカニズムであり、サーバーと通信しません。

上記はJSブラウザが保存する内容の詳細な説明です。JSブラウザの保存に関する詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • ブラウザでの URL 保存の JavaScript 実装
  • js ブラウザ ローカル ストレージ store.js の紹介とアプリケーション
  • ローカルストレージをより適切に処理するための 8 つの JavaScript ライブラリを共有する
  • JS localStorage ストレージ オブジェクト、sessionStorage ストレージ配列オブジェクトの操作例
  • JS+HTML5 ローカルストレージ 登録、ログイン、検証機能を実装するためのローカルストレージの例
  • JavaScript データ型の保存方法の詳細な説明
  • jsローカルストレージに基づく(詳細説明)
  • JavaScript データ保存 Cookie
  • JavaScriptの3つのデータ保存方法の違いをまとめます

<<:  Winows Server 2019 アクティベーション コードとボリューム ライセンス エディション KMS インストール キー GVLK

>>:  MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策

推薦する

アニメーションの再生と一時停止を制御するための CSS のヒント (非常に実用的)

今日は、CSS を使用してアニメーションの再生と一時停止を制御する非常に簡単なトリックを紹介します。...

HTML タイトル属性をラップする方法

数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...

テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要

この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...

非常に実用的なMySQL関数の包括的な概要、詳細な例の分析チュートリアル

目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...

MySQLデータ遅延ジャンプの問題の解決策

今日は、データベース遅延ジャンプに関する別の典型的な問題を分析しました。このプロセスでは、参考のため...

MySQL で結果を選択して更新を実行する例のチュートリアル

1. 単一テーブルクエリ -> 更新 テーブル名の更新 フィールド1=新しい値1、フィールド2...

IDEA が MySQL データベースに接続できない問題の 6 つの解決策

この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...

6秒でMySQLに100万件のレコードを挿入する方法を教えます

1. アイデアMySQL に 1,000,000 件のレコードを挿入するのにたった 6 秒しかかかり...

Vue3 での provide と injection の使用

1. provideとinjectの説明Provide と Inject により、ネストされたコンポ...

アイデア展開Tomcatサービス実装プロセス図

まずプロジェクトの成果物を構成するスタートアップ項目の設定 Tomcatサービスを作成する開始したい...

Linuxにおけるumaskコマンドの使用原理と計算方法の詳しい解説

目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

1 つの記事で Nginx の現在の制限を理解する (簡単な実装)

Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

MySQL で制限を使用するとパフォーマンスに影響するのはなぜですか?

まず、MySQL のバージョンについて説明します。 mysql> バージョンを選択します();...