WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

cookie.js

github.com

cookie.jsはcookieを簡単に操作できるjQueryプラグイン

GitHubからダウンロードして読み込む

cookieを保存する方法

$.cookie("KEY", "VALUE", { expires: 1 });

KEYにcookieの名前、VALUEに値を入力する。
{}の中には様々なオプションを設定することができる。

expires 有効期限の日数
path 有効なパス
domain 有効なドメイン
secure HTTPS接続の場合のみcookieを送信。デフォルトはfalse

cookieの取得

$.cookie("KEY");

cookieを削除する方法

$.removeCookie("KEY");

cookieを確認する方法(Chromeの場合)

設定→プライバシーのコンテンツの設定→すべてのcookieとサイトデータ
に現在保存されているcookieがある。

cookieを保存して1回目の訪問か2回目以降の訪問かをalertに表示

デモはこちら

http://efu.sakura.ne.jp/web/cookie/

$(function(){
  var cookie = $.cookie( "sample" );
  if(cookie == undefined){
    alert('1回目の訪問です。');
    $.cookie( "sample" , "test" , { expires: 7 , path:'/'});
  } else {
    alert('2回目以降の訪問です。');
  }
});

その日の初回アクセス時のみモーダル表示

デモはこちら

http://efu.sakura.ne.jp/web/cookie2/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>cookie.jsを使用してその日の初回アクセス時のみモーダル表示</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/jquery.cookie.js"></script>
  <script src="js/jquery.colorbox-min.js"></script>
  <script src="js/script.js"></script>
  <link rel="stylesheet" href="css/colorbox.css">
</head>
<body>
  <a href="https://www.youtube.com/embed/bto1GpdAKEA?rel=0&amp;showinfo=0" class="modal_movie"></a>
</body>
</html>
$(function(){
  var str = 'abcdefghijklmnopqrstuvwxyz'
  + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  + '0123456789';
  str = str.split('');
  var rand_str = '';
  for(var i = 0; i < 16; i++) {
    rand_str += str[Math.floor(Math.random() * str.length)];
  }
  var cookie = $.cookie("test");
  if(cookie == undefined){
    var date = new Date();
    var midnight = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
    $.cookie( "test" , rand_str , { expires: 1});
    $('.modal_movie').colorbox({
      iframe:true,
      open:true,
      maxHeight:"100%",
      maxWidth:"100%",
      innerWidth:"50%",
      innerHeight:"50%"
    });
  }
});