2014/07/24

【JavaScript】サイト情報カスタマイズの基本 Cookieの使い方

【JavaScript】サイト情報カスタマイズの基本 Cookieの使い方

ショッピングサイトなど,各ユーザに合わせてカスタマイズされた表示を行うためには,Cookieを利用することが一般的です.
今回は,そのCookieの基本的な使用方法を紹介したいと思います.

目次

Cookieとは

Cookieは,ユーザの情報をはじめとした,様々な情報をクライアント(Webブラウザ)に保存することを言います.

ショッピングサイトにおいてカートへ追加した商品を保持しておけるのも,この方法を使っていたりする場合があります.

サンプル

では,Cookieにデータを書き込んでみるサンプルとソースコードを紹介します.

フォームに入力した内容をCookieに書き込みます.

ソースコードは以下の様になっています.

	//Cookieが使用可能かチェック
	var confirmOutput = document.getElementById("confirmOutput");
	var cookieOutput = document.getElementById("cookieOutput");

	var cookieFlag = navigator.cookieEnabled;

	if (cookieFlag == true) {
	    confirmOutput.innerHTML = "cookie enable";
	} else {
	    confirmOutput.innerHTML = "cookie unable";
	}

	//書き込みボタン押下時の動作
	document.getElementById("cookieWrite").addEventListener("click", function() {
	    var writeText = document.getElementById("cookieData").value;
	    //有効期限をGMTで設定
	    var expDay = (new Date("2020/7/24")).toGMTString();
            //入力データをエンコード(項目は;(セミコロン)で区切る)
	    var writeData = "Message=" + escape(writeText) + ";expires=" + expDay;
            //Cookieへの書込
	    document.cookie = writeData;
	}, false);

	//読み込みボタン押下時の動作
	document.getElementById("cookieRead").addEventListener("click", function() {
	    var readData = document.cookie;
            //読み込んだデータをデコードし,出力
	    cookieOutput.innerHTML = cookieOutput.textContent = unescape(readData);
	}, false);

Cookieへの書込オプションは,有効期限を表すexpiresを含めて,以下の表に示すオプションがあります

オプション概要
expires 有効期限をGMTで指定
domain 送信先ドメインを指定
path 送信先パスを指定
secure アクセス先が安全な場合のみCookieを送信

まとめ

今回はボタン押下時に読み書きを行っていますが,読み込みタイミングをページをロードした時に変更し,Cookieの内容からコンテンツの表示を操作することで,各ユーザに合わせたカスタマイズが出来るようになります.

ただし,個人情報などを扱う場合にはセキュリティに十分に配慮してください.