検索
ホームページウェブフロントエンドjsチュートリアルjs_javascript スキルにおける Cookie の使用の詳細な分析

Cookie の概要
前のセクションでは、不変のフレームワークを使用してショッピング列データを保存しましたが、商品表示ページは常に変化していましたが、これによりシミュレートされたグローバル変数を実現できました。 、しかし厳密ではありません。たとえば、ナビゲーション フレーム ページ内で右クリックし、ショートカット メニューの [更新] コマンドをクリックすると、JavaScript 変数はすべて失われます。したがって、厳密なクロスページ グローバル変数を実装するには、JavaScript の別のメカニズムである Cookie が真のグローバル変数の要件を満たすことができます。

Cookie はブラウザが提供するメカニズムで、ドキュメント オブジェクトの Cookie 属性を JavaScript に提供します。これは JavaScript によって制御できますが、JavaScript 自体のプロパティではありません。 Cookie はユーザーのハード ドライブに保存されているファイルで、通常、ブラウザがドメイン名に再度アクセスすると、Cookie が使用可能になります。したがって、Cookie は 1 つのドメイン名の下で複数の Web ページにまたがることができますが、複数のドメイン名にまたがって使用することはできません。

ブラウザーが異なれば Cookie の実装方法も異なりますが、それらのプロパティは同じです。たとえば、Windows 2000 および Windows XP では、cookie ファイルは、documents and settingsuserNamecookie フォルダに保存されます。通常の命名形式は userName@domain.txt です。

Cookie メカニズムはユーザーのハードドライブに情報を保存するため、グローバル変数として使用できます。これは最大の利点の 1 つです。以下のような場合に使用できます。

(1) ユーザーのログイン状態を保存します。たとえば、ユーザー ID は Cookie に保存されるため、ユーザーは次回そのページにアクセスするときに再度ログインする必要がなくなります。現在、多くのフォーラムやコミュニティがこの機能を提供しています。 Cookie には有効期限を設定することもでき、制限時間が経過すると、Cookie は自動的に消去されます。したがって、システムはユーザーにログイン状態を維持するよう求めることがよくあります。一般的なオプションは 1 か月、3 か月、1 年などです。

(2) ユーザーの行動を追跡します。たとえば、天気予報 Web サイトでは、ユーザーが選択した地域に基づいて地域の気象状況を表示できます。毎回場所を選択するのは面倒ですが、Cookie を使用すると、次回ページを開くときに前回訪問した場所を記憶し、自動的に表示されます。最後のユーザーの地域の気象状況。すべてがバックグラウンドで行われるため、このようなページはあたかも特定のユーザー向けにカスタマイズされているかのように見え、非常に使いやすくなります。

(3) カスタマイズされたページ。ウェブサイトがスキンの変更やレイアウトの変更機能を提供している場合、背景色や解像度などのユーザーのオプションを記録するために Cookie が使用されることがあります。ユーザーが次回訪問するときも、前回の訪問時のインターフェイス スタイルを保存できます。

(4) ショッピングカートを作成します。前の例と同様に、Cookie はユーザーが購入する必要がある商品を記録するために使用され、チェックアウト時に均一に送信できます。たとえば、淘宝網では Cookie を使用してユーザーが閲覧した商品を記録し、いつでも比較できるようにしています。

もちろん、上記のアプリケーションは Cookie が完了できるアプリケーションの一部にすぎず、グローバル変数を必要とする関数はさらにあります。 Cookie の欠点は主にセキュリティとプライバシー保護にあります。主に以下の種類があります:

(1) Cookie が無効になっている場合があります。ユーザーが個人のプライバシー保護に細心の注意を払う場合、ブラウザの Cookie 機能を無効にする可能性があります。
(2) Cookie はブラウザに関連しています。つまり、同じページにアクセスしても、異なるブラウザで保存された Cookie には相互にアクセスできません。
(3) Cookie は削除される場合があります。各 Cookie はハードディスク上のファイルであるため、ユーザーによって削除される可能性があります。
(4) Cookie のセキュリティは十分に高くありません。すべての Cookie は平文形式でファイルに記録されるため、ユーザー名やパスワードなどの情報を保存したい場合は、事前に暗号化することをお勧めします。

Cookie を設定する
各 Cookie は名前と値のペアです。次の文字列を document.cookie に割り当てることができます:

document.cookie ="userId=" 828";
複数の名前と値のペアを一度に保存する場合は、セミコロンとスペース (;) を使用してそれらを区切ることができます。例:

document.cookie="userId=828 ; userName=hulk";
Cookie の名前や値にはセミコロン (;)、カンマ (,)、等号 (=)、およびスペースを使用できません。これを Cookie の名前で行うのは簡単ですが、保存される値は未定義です。これらの値を保存するにはどうすればよいでしょうか?この方法では、escape() 関数を使用してエンコードします。これにより、一部の特殊な記号を 16 進表現で使用できます。たとえば、スペースは「20%」としてエンコードされ、Cookie 値に保存できます。中国語の文字化けの発生も回避します。例:

コードをコピー コードは次のとおりです:

document.cookie ="str= "エスケープ("I love ajax");



コードをコピーと同等です。 コードは次のとおりです。 document.cookie="str=I love ajax";
escape() エンコードを使用する場合、値を取り出した後で unescape() を使用してデコードし、元の Cookie 値を取得する必要があります。これについては以前に紹介しました。

document.cookie はプロパティのように見えますが、異なる値を割り当てることができます。ただし、一般的な属性とは異なります。たとえば、次の 2 つのステートメントを連続して実行しても、元の値が失われるわけではありません。 🎜>

コードは次のとおりです:


コードをコピー

コードは次のとおりです。

document.addCookie("userId=828"); document.addCookie( "userName=hulk"); 実際、Cookie の値を変更したい場合は、次のように再割り当てするだけです。 >document.cookie="userId =929"; これにより、userId という名前の Cookie 値が 929 に設定されます。
Cookie の値を取得する
Cookie の値を取得する方法を説明します。 Cookie の値は document.cookie から直接取得できます:

var strCookie=document.cookie;
これは、セミコロンで区切られた複数の名前と値のペアで構成される文字列を取得します。このドメイン名の下にあるすべての Cookie が含まれます。例:




コードをコピー


コードは次のとおりです:


出力から分かるように、クッキー名を指定して指定した値を取得するのは、クッキー値を扱う上で最も面倒な部分です。ユーザーはこの文字列を自分で分析して、指定された Cookie 値を取得する必要があります。たとえば、userId の値を取得するには、次のように実行します。




コード


コードは次のとおりです:




このようにして、単一の Cookie の値を取得します。

同様のメソッドを使用して、1 つ以上の Cookie の値を取得できます。主な手法はやはり文字列と配列の関連操作です。


Cookie の有効期限を設定します

これまでのところ、すべての Cookie はシングルセッション Cookie です。つまり、これらの Cookie はブラウザを閉じると失われます。これらの Cookie は、対応するハードディスク ファイルを作成せずにメモリに保存されるだけです。

実際の開発では、ユーザーのログイン状態の保存など、Cookieを長期間保存する必要があることがよくあります。これは、次のオプションを使用して実現できます:

document.cookie="userId=828;expiress=GMT_String";
ここで、GMT_String は GMT 形式で表現された時刻文字列です。このステートメントは userId を置き換えます。 Cookie は GMT_String で表される有効期限に設定されます。この時間が経過すると、Cookie は消えてアクセスできなくなります。例: Cookie の有効期限が 10 日後に切れるように設定したい場合は、次のように設定できます:



コードをコピー
コードは次のとおりです:



声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?JavaScriptのデータ型:ブラウザとNodejsに違いはありますか?May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1)グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2)バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3)パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント://および / * *を使用するためのガイドJavaScriptコメント://および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments:シングルライン(//)およびマルチライン(//)

Python vs. JavaScript:開発者の比較分析Python vs. JavaScript:開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript:ジョブに適したツールを選択するPython vs. JavaScript:ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1)データサイエンスおよび自動化タスクのPythonを選択します。 2)フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript:それぞれの強みを理解するPythonとJavaScript:それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア:CまたはCの上に構築されていますか?JavaScriptのコア:CまたはCの上に構築されていますか?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション:フロントエンドからバックエンドまでJavaScriptアプリケーション:フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例:Webページテキストのコンテンツを変更します。 2。バックエンドの例:node.jsサーバーを作成します。

Python vs. Javascript:どの言語を学ぶべきですか?Python vs. Javascript:どの言語を学ぶべきですか?May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1)キャリア開発:Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2)学習曲線:Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3)エコシステム:Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター