JavaScriptの標準仕様としてビルトインされている主なオブジェクトの使い方を紹介する連載。今回は、ユーザーを識別する情報を扱うCookieについて。ユーザーのデータを保存、取得する、有効期限を設定する基本を解説。
書籍の中から有用な技術情報をピックアップして紹介する本シリーズ。今回は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター(2015年6月27日発行)』からの抜粋です。
ご注意:本稿は、著者及び出版社の許可を得て、そのまま転載したものです。このため用字用語の統一ルールなどは@ITのそれとは一致しません。あらかじめご了承ください。
Cookieとは、初めてアクセスしたWeb サイトからコンピューターのハードディスク上に配布される小さなファイルで、個々のユーザーを識別する情報が書き込まれます。これによって、ユーザーがそのサイトに戻ったときに、ユーザーが何回そのサイトにアクセスしたかをCookieの情報も基づいて表示したり、さらにはユーザーの閲覧記録から、ユーザーの好みに合ったコンテンツを表示するといった使い方がされています。
Cookie(Cookie)は、以下のようなことを実現するためのオブジェクトです。
このようなデータは、サーバーサイドのプログラムを利用してサーバー側に記録することもできますが、Cookieを用いることにより、クライアント側のハードディスク内にCookie情報として記録することができます。
Cookieは、ユーザー側の操作を支援するのが目的です。オンラインストアのショッピングカートに商品を追加したあと、数日後に戻って来てもまだカートの中に商品が残っていることってありますよね。これがCookieの機能です。ただし、サイトに個人情報を登録していない場合は、サーバー側はCookieを持つユーザーが、そのWeb サイトに戻って来たことだけを知ることができます。
Cookieを設定するには、documentオブジェクトのcookieプロパティを使用します。
Cookieのデータは、「キー=値」のようにキーと値のペア(組み合わせ)で構成され、セミコロンで区切ることで複数のデータが登録されます。
例えば、次のように記述した場合は、Cookieの中身は「name=Taro; country=Japan」のようになります。
では、実際にCookieを設定して、アラートダイアログに中身を表示してみましょう。
英数字以外の文字をCookieの値にする
「日本語などの英数字以外の文字をCookieに保存するには、encodeURI Component()メソッドで対象の文字列をエンコーディングしておきましょう」
●encodeURIComponent()メソッド
引数に指定した文字列をエスケープ処理します。半角英数字以外の文字(特殊文字を除く)がUTF-8エスケープシーケンス(%と16進数2桁の値)に置き換えられます。
Cookieに保存する際は、次のように記述して、encodeURIComponent()メソッドの戻り値を「キー=」に連結するようにします。
このように記述すると、次のデータがCookieに書き込まれます。
Copyright © ITmedia, Inc. All Rights Reserved.