ホームページ > 記事 > ウェブフロントエンド > JavaScriptの作成と保存Cookie例_基礎知識
Cookie とは何ですか?
Cookie は、訪問者のコンピュータに保存される変数です。この Cookie は、同じコンピュータがブラウザを通じてページを要求するたびに送信されます。 JavaScript を使用して Cookie 値を作成および取得できます。
Cookie の使用シナリオ:
Cookie に名前を付ける
訪問者が初めてページにアクセスするとき、自分の名前を入力できます。名前は Cookie に保存されます。訪問者がサイトに戻ると、「ようこそ John Doe!」のようなウェルカム メッセージが表示されます。名前は Cookie から取得されます。
パスワード Cookie
訪問者が初めてページにアクセスするとき、パスワードを入力することがあります。パスワードは Cookie に保存することもできます。再度サイトにアクセスすると、Cookie からパスワードが取得されます。
日付 Cookie
訪問者が初めて Web サイトにアクセスしたときに、現在の日付を Cookie に保存できます。再度サイトにアクセスすると、「前回の訪問は 2005 年 8 月 11 日火曜日でした!」というようなメッセージが表示されます。日付も Cookie から取得されます。
Cookie の作成と保存
この例では、訪問者の名前を保存する Cookie を作成します。訪問者が初めてサイトを訪問するとき、名前を入力するように求められます。名前は Cookie に保存されます。訪問者が Web サイトに戻ると、ウェルカム メッセージが表示されます。
まず、訪問者の名前を Cookie 変数に保存する関数を作成します。
Cookie の作成は、実際には文字列を綴ることになります:
"username=amosli;expires=Mon, 16 Dec 2013 16:20:04 GMT"
次に、document.cookie= 上記の文字列。
上記の関数のパラメータには、Cookie の名前、値、有効期限が保存されます。
上記の関数では、まず日数を有効な日付に変換し、次に Cookie の名前、値、およびその有効期限を document.cookie オブジェクトに保存します。
その後、Cookie が設定されているかどうかを確認する別の関数を作成します。
getCookie() の中心となるのは document.cookie という 1 つの文だけで、残りは文字列の処理です。
上記の関数は、最初に document.cookie オブジェクトに Cookie があるかどうかを確認します。 document.cookie オブジェクトが特定の Cookie を保存している場合、指定した Cookie が保存されているかどうかを引き続き確認します。必要な Cookie が見つかった場合は値が返され、それ以外の場合は空の文字列が返されます。
最後に、関数を作成する必要があります。この関数の機能は次のとおりです。Cookie が設定されている場合はウェルカム メッセージを表示し、そうでない場合はユーザーに名前の入力を求めるプロンプト ボックスを表示します。
これがコードのすべてです: