28
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-06-28

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を削除するように設定を変更するなどの対応をしましょう。

28
35
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?