Cookieの情報を【取得/保存/削除】する #JavaScript

Cookieとは

Cookie（クッキー）とは、ホームページを訪問したユーザーの情報を一時的の保存する仕組みです。
サイトを訪れた日時、訪問回数など、様々な内容がユーザー情報として保存されることによって、サイトを再訪問したときにユーザーを特定し、情報を入力する手間が省けます。

①IDとパスワードを入力して一度ログインしたサイトに、しばらくしてから再度アクセスするとIDとパスワードを入力せずに入ることができる。
②ショッピングサイトに訪問したとき、すでにログイン状態になっていたり、カートに入れた商品がそのまま残っている。

どちらも、ログイン/カート情報がCookieに保存されているおかげ！！
このように、CookieはWebサイトのアクセスを便利にしたり、様々なサービス提供を可能にすることに一役買っています。（インターネットバンキングの多くもCookieが有効になっていないと使用できない）

Cookieから値を取得する

Cookie取得の基本であり、シンプルな方法です。
ただ、Cookieに複数の値が書き込まれている場合";"で区切られた文字列として取得するので、すご～くわかりにくい…

var str = document.cookie;
// 「 key1=val1; key2=val2; key3=val3; ・・・ 」

Cookieをkeyで取得する

Cookieから値を取得して連想配列にセットします。
これでCookieがすご～く扱いやすくなります。

// 連想配列に格納
function getCookieArray(){
    var arr = new Array();
    if(document.cookie != ''){
        var tmp = document.cookie.split('; ');
        for(var i=0;i<tmp.length;i++){
            var data = tmp[i].split('=');
            arr[data[0]] = decodeURIComponent(data[1]);
        }
    }
    return arr;
}

// keyを指定して取得
// 「 key1=val1; key2=val2; key3=val3; ・・・ 」というCookie情報が保存されているとする
var arr = getCookieArray();
var value = 'key1の値：' + arr['key1'];
// key1の値：val1

Cookieの保存と削除

Cookieの下準備

var kigen = 30; //Cookieの期限（1ヶ月とする）←適宜、適切な期限を設定
var nowdate = new Date(); //現在の日付データを取得
nowdate.setTime(nowdate.getTime() + kigen*24*60*60*1000); //1ヶ月後の日付データを作成
var kigendate = nowdate.toGMTString(); //GMT形式に変換して変数kigendateに格納
var cookievalue = "session_id=user_0001; ";
var expires = "expires=" + kigendate + "; ";
var path = "path=/";
var dt = new Date('1999-12-31T23:59:59Z'); // 過去の日付をGMT形式に変換

クッキーの値（上記ソース内cookievalueに値する）にはセミコロン ( ; )、カンマ ( , ) や空白を含めてはならないので、書き込む値はencodeURIComponent()でエンコードしましょう。

※セキュリティの観点から考慮して、半永久的にユーザー情報を保持しているのは良くないため、期限を設定するのが慣例となっています。

Cookieにデータを書き込む（保存）

document.cookie = cookievalue + expires + path;

Cookieのデータを削除する

「Cookie」には有効期限を設定することができ、期限が過ぎると「cookie」のデータが自動的に削除されるので、意図的に削除することが可能となります。

document.cookie = "session_id=; expires=" + dt.toUTCString() + "; "+ path
// 「expires=dt.toUTCString();」の部分は「max-age=0;」でもOK

「expires=dt.toUTCString()」というのは有効期限が「過去の日付」を表していて
「max-age=0」というのは有効期限が「0秒」という意味なので
どちらを使用しても、即座にCookieを削除ができるというわけです。

Cookieのオプション属性

属性	内容
path	指定したパスがcookieの有効範囲
expires	指定した日付までが有効期限
max-age	指定した秒数だけ有効期限
domain	指定したドメインがcookieの有効範囲
secure	https通信の時だけcookieが有効

domainとsecureは個人的には使ったことないな…

Cookieの危険性【セッションハイジャック】

Cookieの識別子が漏えいすることによるセッションハイジャック。

CookieにはサイトのセッションIDとともに、ログイン情報が含まれていることがあり、この情報自体がSSLなどで暗号化されていても、セッションIDさえわかってしまえばサーバーに送ることでログイン状態が再現されてしまいます。

Cookieは便利な反面、セキュリティに関するリスクがあることも認識して、セキュリティを高めてプライバシーを守りたい場合は、Cookieを削除するように設定を変更するなどの対応をしましょう。