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

JavaScriptでドメインベースのCookieを作成する方法【初心者向け解説】

ドメインベースのCookieとは？

JavaScriptでドメインベースのCookieを作成するには、Cookieを設定する際にdomain属性とpath属性を指定します。domain属性を設定することで、特定のドメイン（およびそのサブドメイン）全体でCookieを共有できるようになります。

基本的な書式は次のとおりです。

domain=.example.com;path=/

ドメイン名の先頭にドット（.）を付けるのがポイントです。こうすることで、example.com だけでなく、www.example.com や blog.example.com といったすべてのサブドメインからも同じCookieにアクセス可能になります。また、path=/ を指定すると、サイト内のすべてのパスでCookieが有効になります。

サンプルコード：フォーム入力値をCookieに保存する

以下のコードは、テキストボックスに入力された名前を受け取り、ドメインベースのCookieとして保存するシンプルな例です。

<html>
<head>
<script>
function WriteCookie() {
    // 入力チェック
    if (document.myform.customer.value == "") {
        alert("何か値を入力してください！");
        return;
    }

    // 入力値をエンコードしてCookieに保存
    cookievalue = escape(document.myform.customer.value) + ";";
    document.cookie = "name=" + cookievalue + ";domain=.example.com;path=/";

    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() 関数を使って、入力値に含まれる特殊文字をエンコードします。より現代的なコードでは encodeURIComponent() の使用が推奨されます。
  • Cookieの設定： document.cookie に対して、「name=値」に加えて domain=.example.com と path=/ をセミコロン区切りで連結して代入します。
  • 結果の表示： document.write() で設定したCookieの内容を画面に出力します。

注意点

domain属性に指定できるのは、現在アクセスしているページと同一のドメイン、またはその親ドメインのみです。まったく別のドメイン（例：other-site.com）を指定することはできません。また、ローカル環境（file:// プロトコル）ではCookieの動作が制限される場合があるため、動作確認は実際のサーバー上で行うことをおすすめします。

  1. JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

    JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。 注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset=

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

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