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

JavaScriptでCookieを設定・取得する方法をわかりやすく解説

Cookieの設定（書き込み）

Cookieを作成する最も簡単な方法は、document.cookieオブジェクトに文字列値を代入することです。基本的な書式は以下の通りです。

document.cookie = "key1=value1;key2=value2;expires=date";

ここで「expires」属性は省略可能です。有効な日付や時刻を指定した場合、Cookieはその日時で失効し、以降はその値にアクセスできなくなります。expiresを指定しない場合は、ブラウザを閉じるとCookieが削除される「セッションCookie」として扱われます。

サンプルコード

以下の例では、フォームに入力された顧客名をCookieに保存しています。実際に動かして試してみてください。

<html>
  <head>
    <script>
      <!--
        function WriteCookie() {
          if( document.myform.customer.value == "" ) {
            alert("値を入力してください！");
            return;
          }
          cookievalue = escape(document.myform.customer.value) + ";";
          document.cookie = "name=" + cookievalue;
          document.write ("Cookieの設定 : " + "name=" + cookievalue);
        }
      //-->
    </script>
  </head>
  <body>
    <form name="myform" action="">
      名前を入力： <input type="text" name="customer"/>
      <input type="button" value="Cookieを設定" onclick="WriteCookie();"/>
    </form>
  </body>
</html>

補足： escape()関数は現在では非推奨（deprecated）となっています。現代のJavaScriptでは、代わりにencodeURIComponent()を使用することが推奨されています。

Cookieの取得（読み込み）

Cookieの読み取りも書き込みと同じくらい簡単です。document.cookieオブジェクトの値がそのままCookieの内容を表しているため、Cookieにアクセスしたいときは、いつでもこの文字列を利用できます。

document.cookieの文字列には、「name=value」のペアがセミコロン（;）で区切られた形で格納されています。nameがCookieの名前、valueがその文字列の値です。そのため、split()メソッドを使って文字列を分割すれば、個々のCookieを簡単に取り出せます。

サンプルコード

以下のコードを実行すると、保存されているCookieを読み取って表示できます。

<html>
  <head>
    <script>
      <!--
        function ReadCookie() {
          var allcookies = document.cookie;
          document.write ("すべてのCookie : " + 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 ("キー : " + name + "、値 : " + value);
          }
        }
      //-->
    </script>
  </head>
  <body>
    <form name="myform" action="">
      <p>下のボタンをクリックして結果を確認してください：</p>
      <input type="button" value="Cookieを取得" onclick="ReadCookie()"/>
    </form>
  </body>
</html>

このように、document.cookieを活用すれば、JavaScriptだけでCookieの書き込みと読み込みの両方を簡単に実装できます。ユーザーの設定情報やログイン状態の保持など、さまざまな場面で活用できる基本的なテクニックなので、ぜひマスターしておきましょう。

  1. JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

    はじめにHTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。サンプルテーブルの準備まず、例として次のようなテーブルを用意します。<table>   <tr id=StudentDetails>      &

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal