iPentec.com  /  Articles  /  JavaScript  /  Cookie

目次

Cookieに書きこまれたデータを読み込む

JavaScriptでCookieに書き込まれた値を読み込むコードを紹介します。

Cookieからの読み込み

コード

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
    function onload() {
      var cookies = document.cookie;
      document.getElementById("msg").innerHTML = "Cookieの内容:" + cookies;
    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

解説

Cookieに書き込まれている値をすべて読み取るには、document.cookie の値を読み取ります。
Cookieには複数の値が書き込まれている場合";"で区切られた文字列として読みだされます。
splitメソッドの動作の詳細についてはこちらの記事を参照してください。
キーの例
(キー1)=(値1); (キー2)=(値2); (キー3)=(値3); (キー4)=(値4); .... (キーn)=(値n)

実行結果例

実行結果の一例です。Cookieに書き込まれている内容により、表示される内容は異なります。

パーシンングの例

Cookieに書き込まれた、個々のキーと値を取り出すためにはパーシング処理が必要になります。パーシングのコードを紹介します。

コード

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
    function onload() {
      var cookies = document.cookie;
      var cookieItem = cookies.split(";");
      var cookieValue = "";

      for (i = 0; i < cookieItem.length; i++) {
        var elem = cookieItem[i].split("=");
        if (elem[0].trim() == "value") {
          cookieValue = unescape(elem[1]);
        } else {
          continue;
        }
      }
      document.getElementById("msg").innerHTML = "値:" + cookieValue;
    }

  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

解説

    function onload() {
      var cookies = document.cookie;
      var cookieItem = cookies.split(";");

      var cookieValue = "";
      for (i = 0; i < cookieItem.length; i++) {
        var elem = cookieItem[i].split("=");
        if (elem[0].trim() == "value") {
          cookieValue = unescape(elem[1]);
        } else {
          continue;
        }
      }
      document.getElementById("msg").innerHTML = "値:" + cookieValue;
    }
上記のコードにおいて、 
    var cookies = document.cookie;
    var cookieItem = cookies.split(";");
の部分で、Cookieの内容を";"で分割します。この処理により、
(キー1)=(値1); (キー2)=(値2); (キー3)=(値3); (キー4)=(値4)
のCookieの値を
cookieItem[0] = "(キー1)=(値1)"
cookieItem[2] = "(キー2)=(値2)"
cookieItem[3] = "(キー3)=(値3)"
cookieItem[4] = "(キー4)=(値4)"
のように";"で区切り配列に分割します。

  var cookieValue = "";
  for (i = 0; i < cookieItem.length; i++) {
    var elem = cookieItem[i].split("=");

    if (elem[0].trim() == "value") {
      cookieValue = unescape(elem[1]);
    } else {
      continue;
    }
  }
上記のコード部で、cookieItemの配列に対して、"=" で区切ります。この処理により、
elem[0] = "(キー1)"
elem[1] = "(値1)"
と要素ごとに値を取り出せます。

    if (elem[0].trim() == "value") {
      cookieValue = unescape(elem[1]);
    } else {
      continue;
    }
今回は、キー名が"value"の値を取得したいのでelem[0]が"value"であれば、その値であるelem[1]が求める値になるため、この値をcookieValue変数に格納します。

  document.getElementById("msg").innerHTML = "値:" + cookieValue;
格納したcookieValueの値をid=msgのエリアに表示します。

実行結果

こちらのCookie書き込みページにアクセスしたのちに、上記のHTMLファイルにアクセスすると、下図の画面が表示されます。


Cookieに書き込まれた"value=Penguin"の値が表示できています。

補足：すべてのキーと値を表示する場合

すべてのキーと値を表示する場合は下記のコードを利用します。動作の仕組みは先のコードと同様です。
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
    function onload() {
      var cookies = document.cookie;
      var cookieItem = cookies.split(";");
      var cookieValue = "";

      for (i = 0; i < cookieItem.length; i++) {
        var elem = cookieItem[i].split("=");
        document.getElementById("msg").innerHTML += "キー名:" + elem[0].trim() + " / 値:" + decodeURIComponent(elem[1]) +"<br/>";
      }

    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

動作結果

上記のコードの動作結果の一例は下図となります。Cookieに書き込まれているすべてのキーと値の組が画面に表示されます。

連想配列に格納する場合

Cookieに書き込まれているすべての値をパーシングし、連想配列に格納する場合のコードです。

コード

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
    function onload() {
      var cookies = document.cookie;
      var cookieItem = cookies.split(";");
      var cookieArray = new Array();

      for (i = 0; i < cookieItem.length; i++) {
        cookieItem[i] = cookieItem[i].trim();
        var elem = cookieItem[i].split("=");
        cookieArray[elem[0]] = decodeURIComponent(elem[1]);
      }

      document.getElementById("msg").innerHTML = "値:" + cookieArray["value"];
    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

解説

  function onload() {
    var cookies = document.cookie;
    var cookieItem = cookies.split(";");

    var cookieArray = new Array();

    for (i = 0; i < cookieItem.length; i++) {
      cookieItem[i] = cookieItem[i].trim();
      var elem = cookieItem[i].split("=");
      cookieArray[elem[0]] = decodeURIComponent(elem[1]);
    }

    document.getElementById("msg").innerHTML = "値:" + cookieArray["value"];
  }


    var cookies = document.cookie;
    var cookieItem = cookies.split(";");
上記コードにて、Cookieから値を読み出し、";"で個々の「キー名=値」の要素に分割します。

  var cookieArray = new Array();

  for (i = 0; i < cookieItem.length; i++) {
    cookieItem[i] = cookieItem[i].trim();
    var elem = cookieItem[i].split("=");
    cookieArray[elem[0]] = decodeURIComponent(elem[1]);
  }
上記コードにて、「キー名=値」に分割された要素に対し"="で分割し、キー名と値を取り出します。上記コードの場合elem[0]にキー名が、elem[1]に値が格納されます。
取り出したキー名を連想配列のキーとして、連想配列に値を格納します。

  document.getElementById("msg").innerHTML = "値:" + cookieArray["value"];
連想配列から、Cookieの値を取得します。取得したいCookieのキーを連想配列のキーに指定して値を取得します。

実行結果

実行結果は先の結果と同様です。

直接特定のキーの値を読み取る場合

先のコードでは、Cookieに書き込まれているすべての値をパーシングしましたが、特定のキーの値だけを読み取ればよい場合は、以下のコードも利用可能です。

コード

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
    function onload() {
      var cookies = document.cookie;
      var keystr = "value=";
      var matchPos = cookies.indexOf(keystr);

      var cookieValue = "";

      if (matchPos != -1) {
        var valueStart = matchPos + keystr.length
        var valueEnd = cookies.indexOf(";", valueStart);
        if (valueEnd != -1) {
          cookieValue = cookies.substring(valueStart, valueEnd);
        } else {
          cookieValue = cookies.substring(valueStart);
        }
        cookieValue = unescape(cookieValue);

      }
      document.getElementById("msg").innerHTML = "値: " + cookieValue;
    }
  </script>
</head>
<body onload="onload();">
  <div id="msg"></div>
</body>
</html>

解説

  var cookies = document.cookie;
  var keystr = "value=";
  var matchPos = cookies.indexOf(keystr);
上記コードによりCookieを読み取り、cookies変数に文字列を格納します。取得したい"(キー名)="をindexOf()メソッドに与え、cookiesの文字列内を検索します。

  if (matchPos != -1) {
    var valueStart = matchPos + keystr.length
    var valueEnd = cookies.indexOf(";", valueStart);
    if (valueEnd != -1) {
      cookieValue = cookies.substring(valueStart, valueEnd);
    } else {
      cookieValue = cookies.substring(valueStart);
    }
    cookieValue = decodeURIComponent(cookieValue);
  }
cookies内に、"(キー名)="の文字列が含まれる場合は、取得したいキー名に対する値が含まれているため、値を所得します。
値の取得方法は、"(キー名)="の文字列が見つかった位置に、"(キー名)="の文字数分を加えた場所(valueStart)から末尾に向かって";"を検索します。";"が見つかれば、(valueStart)の位置から";"が見つかった位置の一つ手前までが、取得したいキー名に対する値になります。一方、";"が見つからなかった場合は、Cookie内の最後の要素であるため、末尾までが取得したいキー名に対する値となります。
取得できた値はcookieValueに確認します。また、値がASCII文字でない可能性もあるため、decodeURIComponent()関数を利用してデコードします。

  document.getElementById("msg").innerHTML = "値: " + cookieValue;
最後にデコードされたCookieの値を表示します。

著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2015-12-16

関連するページ

ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.