Cookie

Cookie（クッキー）とは

Cookie（クッキー）とは、Webサイトがブラウザに保存する利用者個人にまつわる情報のこと。

たとえば、Amazonのような通販サイトで、一度ログアウトしてもう一度ログインしても購入したい商品のカートが残っていたりする。

このように、「サイトを離れても（あるいはページを遷移しても）設定を残しておく」ということを成り立たせるのがCookie。

正体はブラウザに保存されるとても小さなテキストファイル。

ブラウザ側に保存されるデータをCookie（クッキー）と呼ぶが、逆にサーバ側に保存されるデータはセッションと呼ぶ。

CGIは、設定情報を残すことができないため「ステートレス」であるとして知られるが、Cookieを使うことでCGIにおいてもステートフルなサービスを実現できる。

逆に、個人用の設定をブラウザに残しておいてしまうため、後で別の人間が同じブラウザで同じサービスを使った時に、間違って情報を不正に利用されかねない（たとえばクレジットカード番号など）というセキュリティ上のリスクもある。

詳しくは以下を参照のこと。

• 初心者でもわかる『cookie（クッキー）』講座 危険性やスマホでの設定方法もズバリ解説｜TIME＆SPACE by KDDI
• 絵で見てわかるITインフラの仕組み (DB SELECTION)

JavaScriptからCookieを操作する

JavaScriptからCookieを操作するには、document.cookieを操作すればよい。

詳しくは以下の書籍が参考になる。

• パーフェクトJavaScript (PERFECT SERIES 4)

PHPからCookieを操作する

PHPからCookieを操作するには、スーパーグローバル変数$_COOKIEを操作すればよい。

PHP（言語）も参照のこと。

js-cookieとjQueryの例

js-cookie

自分のWebサイトでCookieを扱いたい場合、js-cookieを使うとCookieを手軽に操作出来る。

• js-cookie

jQueryでjs-cookieを使う

たとえば、jQueryとともにjs-cookieを使う場合、まず

<script src="/js.cookie.js"></script>

でjs.cookie.jsを読み込む。

Cookieの取得は

    var sizevar = Cookies.get('cookieFontSize');
    if (sizevar== 'xbig') {
        $("body").css("fontSize","200%"); 
    }
    else if (sizevar== 'big') {
        $("body").css("fontSize","150%"); 
    }
    else if (sizevar== 'normal') {
        $("body").css("fontSize","100%"); 
    }
    else if (sizevar== 'small') {
        $("body").css("fontSize","14px"); 
    }
    else if (sizevar== 'xsmall') {
        $("body").css("fontSize","13px"); 
    }
    
    var familyvar = Cookies.get('cookieFontFamily');
    if (familyvar == 'mincho') {
        $("body").addClass('font_mincho');
        $("body").removeClass('font_gothic');
    }
    else if (familyvar== 'gothic') {
        $("body").addClass('font_gothic');
        $("body").removeClass('font_mincho');
    }

Cookieの設定や削除は

    $("button.xbig").click(function(){
        $("body").css("fontSize","200%"); 
        Cookies.set('cookieFontSize', 'xbig', { expires: 7 });
    });
    $("button.big").click(function(){
        $("body").css("fontSize","150%"); 
        Cookies.set('cookieFontSize', 'big', { expires: 7 });
    });
    $("button.normal").click(function(){
        $("body").css("fontSize","100%"); 
        Cookies.set('cookieFontSize', 'normal', { expires: 7 });
    });
    $("button.small").click(function(){
        $("body").css("fontSize","14px"); 
        Cookies.set('cookieFontSize', 'small', { expires: 7 });
    });
    $("button.xsmall").click(function(){
        $("body").css("fontSize","13px"); 
        Cookies.set('cookieFontSize', 'xsmall', { expires: 7 });
    });
    
    $("button.bt_mincho").click(function(){
        $("body").addClass('font_mincho');
        $("body").removeClass('font_gothic');
        Cookies.set('cookieFontFamily', 'mincho', { expires: 7 });
    });
    $("button.bt_gothic").click(function(){
        $("body").addClass('font_gothic');
        $("body").removeClass('font_mincho');
        Cookies.set('cookieFontFamily', 'gothic', { expires: 7 });
    });
    $("button.bt_clean").click(function(){
        $("body").css("fontSize","14px"); 
        $("body").removeClass('font_mincho');
        $("body").removeClass('font_gothic');
        Cookies.remove('cookieFontSize');
        Cookies.remove('cookieFontFamily');
    });

のようにする。

jQueryサンプルコードも参照のこと。