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

JavaScriptで現在のページのすべてのCookieを一覧表示する方法

Cookieを作成する際には、「path」パラメータを使用します。このパラメータには、Cookieを設定する対象となるディレクトリやWebページへのパスを指定します。現在のページからCookieを取得したい場合は、この値を空のままにしておくことができます。なお、特に指定しない場合、Cookieはデフォルトで現在のページに紐付けられます。

JavaScriptでCookieを取得する仕組み

JavaScriptでは、document.cookie プロパティを使うことで、現在のページに関連付けられたすべてのCookieにアクセスできます。このプロパティが返すのは、「名前=値」のペアがセミコロン（;）で区切られた1つの文字列です。そのため、実際に各Cookieの名前と値を個別に扱いたい場合は、文字列を分割して配列に変換する処理が必要になります。

実装例

現在のページのすべての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を1つの文字列として取得します。
  • split(';')：取得した文字列をセミコロンで分割し、Cookieごとの配列を作成します。
  • split('=')：さらにイコール記号で分割することで、Cookieの名前と値をそれぞれ取り出せます。

このように、document.cookie プロパティと文字列操作を組み合わせるだけで、特別なライブラリを使わずに現在のページのCookie情報を簡単に一覧表示できます。

  1. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo

  2. JavaScriptでクリックした要素にアクティブクラスを追加する方法

    Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ