jQuery
Pocket

Webブラウザを通じてユーザのコンピュータに一時的にデータを書き込んで保存するCookie。

Cookieを使えばサイトに何回来たかなど計ることができます。

こんな使い方をしてみた

Cookieは値や有効期限を設定できるので、キャンペーン系のサイトで使ってみました。

シチュエーション

こんな対応で使ってみました。

  • 普段はないキャンペーン用のメインビジュアルがある。
  • キャンペーン期間中に最初にサイトに来た場合にそのメインビジュアルを見せたい。
  • そのメインビジュアルを一度でも見ていれば閉じておく。
  • キャンペーン期間後はCookie情報を削除。

記述内容

サイトに来た時にあるCookieのデータがあるかないかを判別し、ある場合はメインビジュアルは閉じたまま。
ない場合はメインビジュアルを開き、Cookie情報を付与。

以降、そのCookieがあるかないかをまた判別します。

// cookieの有効期限の設定
var cookie_limit;
    cookie_limit = new Date(2015,10,30);
    cookie_limit.getTime();
    cookie_limit.toGMTString();
    console.log(cookie_limit);

// Cookieがあるか調べる
String = document.cookie;
// Cookie判別のフラグ。samplecookieがcookie名。
BooleanCheck = String.indexOf("samplecookie",0);

if(BooleanCheck == -1){
  // cookieがない場合の記述
  console.log("クッキーがないよ");
  // cookieがない場合はcookie情報を付与
  document.cookie = "samplecookie=1; expires=" + cookie_limit;
} else {
  // cookieがある場合の記述
  console.log("クッキーあるよ");
}

こんな感じで書きました。

期限についてはnew Date(2015,10,30);で取得しています。

これは2015年10月30日まで…に見えますが注意が月については注意が必要です。

月は0から始まる仕様になっているので、この場合は2015年11月30日までになります。

うーん。ややこしいですね(^^;

ちょっとした小ネタですが、Cookieの使い方も覚えておいたらどこかで役立ちそうです。

Pocket

Category : Tag :