JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのdocumentオブジェクトでCookieにアクセス・読み取りする方法を解説

JavaScriptでは、document.cookieプロパティを使うことで、Cookieに簡単にアクセスして読み取ることができます。document.cookieオブジェクトの値そのものがCookieの内容を表すため、Cookieの読み取りは書き込みと同じくらいシンプルです。

document.cookieが返す文字列には、セミコロン（;）で区切られた「name=value」形式のペアがリストとして格納されています。ここで「name」はCookieの名前、「value」はその文字列の値を意味します。

実装例

以下のコードを実行すると、JavaScriptのdocumentオブジェクトを使ってCookieにアクセスする方法を確認できます。

<html>
   <head>
      <script>
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("All Cookies : " + allcookies );

               // すべてのCookieペアを配列として取得
               cookiearray = allcookies.split(';');

               // 配列からキーと値のペアを取り出す
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>
   </head>
   <body>
      <form name="myform" action="">
         <p>次のボタンをクリックして結果を確認してください：</p>
         <input type="button" value="Get Cookie" onclick="ReadCookie()"/>
      </form>
   </body>
</html>

コードの解説

このサンプルコードの処理の流れは以下のとおりです。

まず、document.cookieで現在保存されているすべてのCookieを文字列として取得します。次に、split(';')メソッドを使って、セミコロン区切りの文字列を配列に分割します。その後、forループで配列の各要素を処理し、split('=')によって「=」の前後を分離することで、Cookieの名前（キー）と値をそれぞれ取り出しています。

ボタンをクリックするとReadCookie関数が呼び出され、取得したすべてのCookieのキーと値が画面に出力されます。実際の開発では、document.writeの代わりにconsole.logやDOM操作を使って結果を表示するのが一般的です。

なお、Cookieの値にはURLエンコードされた文字列が含まれる場合があるため、必要に応じてdecodeURIComponent()関数でデコードしてから使用するとよいでしょう。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座