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

JavaScriptで複数のCookieを設定する方法をわかりやすく解説

JavaScriptで複数のCookieを設定するには、document.cookieプロパティに対して、Cookieごとに1行ずつ代入を行います。セミコロン（;）はCookie同士を区切るために使われる記号ですが、設定時には個別に代入するのが基本です。

複数のCookieを設定・一覧表示・削除するサンプルコード

以下のコードでは、「追加」「一覧表示」「削除」の3つのボタンを使って、複数のCookie操作を実際に試すことができます。「ADD」ボタンを押すたびに新しいCookieが作成され、「LIST COOKIES」ボタンで現在保存されているすべてのCookieを確認できます。

<!DOCTYPE html>
<html>
   <head>
      <script>
      var num=1;
      function addCookie() {
         document.cookie=num+"="+num;
         num++;
      }
      function listCookies() {
         var result = document.cookie;
         document.getElementById("list").innerHTML=result;
      }
      function removeCookies() {
         var res = document.cookie;
         var multiple = res.split(";");
         for(var i=0;i<multiple.length;i++) {
            var key = multiple[i].split("=");
            document.cookie=key[0]+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
         }
      }
      </script>
   </head>
   <body>
      <button onclick='addCookie()'>ADD</button><br>
      <button onclick='listCookies()'>LIST COOKIES</button><br>
      <button onclick='removeCookies()'>REMOVE</button>
      <h1>Cookies List</h1>
      <p id="list"></p>
   </body>
</html>

コードのポイント

  • addCookie()： 変数numをキー名と値の両方に使用し、呼び出されるたびに新しいCookie（例：「1=1」「2=2」…）を作成します。
  • listCookies()： document.cookieを読み取り、現在保存されているすべてのCookieを画面に表示します。
  • removeCookies()： split(";")でCookieを分割し、各Cookieの有効期限を1970年1月1日に設定することで、すべてのCookieを削除します。

document.cookieの仕組み

document.cookieは文字列として扱われ、読み書きの動作が異なる点に注意が必要です。

・書き込み時： 代入しても既存のCookieは上書きされず、新しいCookieが追加されます。
・読み取り時： 「名前=値」のペアがセミコロン（;）区切りで連結された1つの文字列が返されます。

この特性を利用することで、同じページ上に複数のCookieを簡単に管理できるのです。

  1. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. JavaScriptでドキュメントの読み込み状態（readyState）を確認する方法

    JavaScriptでドキュメント（ページ）の読み込みが完了しているかどうかを確認するには、document.readyStateプロパティを使用します。このプロパティは、現在のドキュメントの読み込み状況に応じて以下の3つの文字列を返します。loading … ドキュメントがまだ読み込み中の状態interactive … ドキュメントの解析は完了したが、画像などのサブリソースは still 読み込み中の状態complete … ドキュメントとすべてのサブリソースの読み込みが完了した状態以下は、ボタンをクリックしたタイミングでdocument.readyStateの値を判定し、ページの読み込み状