JavaScriptでCookieを作成・読み取る方法【サンプルコード付きで解説】

Cookieの作成

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

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

ここで「expires」属性は省略可能です。有効な日付や時刻を指定すると、Cookieはその日時に失効し、以降はその値にアクセスできなくなります。

サンプルコード：Cookieへの書き込み

以下の例では、フォームに入力された名前を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>

Cookieの読み取り

Cookieの読み取りは書き込みと同じくらい簡単です。document.cookieオブジェクトの値がそのままCookieの内容だからです。この文字列には、セミコロン（;）で区切られた「名前=値」形式のペアが格納されているため、必要に応じて解析して利用できます。

サンプルコード：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>

補足：より実践的なCookie操作のポイント

基本的な使い方に加えて、実務では以下の点にも注意するとより安全で堅牢な実装が可能になります。

1. escape()の代わりにencodeURIComponent()を使う

escape()関数は現在非推奨（deprecated）です。日本語などのマルチバイト文字を安全に扱うためにも、encodeURIComponent()の使用を推奨します。

document.cookie = "name=" + encodeURIComponent(customerName) + ";";

2. 有効期限を設定する

「expires」属性にUTC形式の日付を指定すると、Cookieの有効期限を制御できます。たとえば7日間有効なCookieは次のように作成します。

var expires = new Date();
expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000);
document.cookie = "name=value;expires=" + expires.toUTCString();

3. 主なCookie属性

path：Cookieが有効になるパスを指定（例：path=/）
domain：Cookieが有効になるドメインを指定
secure：HTTPS通信時のみCookieを送信
HttpOnly：JavaScriptからのアクセスを禁止し、XSS対策に有効（サーバー側で設定）

これらの属性を適切に組み合わせることで、セキュリティを高めつつ、ユーザー体験を損なわないCookie管理が実現できます。

文字列をJavaScriptの関数呼び出しに変換する方法

HTMLでテキストを太字にする方法｜bタグ・strongタグ・CSSの使い分けを解説

CSSとJavaScriptでタブUIを実装する方法【初心者向け解説】
CSSとJavaScriptを組み合わせれば、Webページにタブ切り替え機能を簡単に実装できます。タブを使うことで、限られたスペースに複数の情報を整理して表示でき、ユーザーにとって見やすいインターフェースを実現できます。ここでは、試験情報を例に、クリックすると表示内容が切り替わるタブの作成方法を紹介します。実装例以下が完全なサンプルコードです。そのままHTMLファイルとして保存すれば動作します。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="
JavaScriptでCookieを読み取る方法を解説！サンプルコード付き
JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset=