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

JavaScriptで名前付きCookieを設定する方法【サンプルコード付きで解説】

JavaScriptで名前付きCookieを設定するには？

Web開発において、Cookieはユーザーの情報をブラウザ側に保存しておくための重要な仕組みです。JavaScriptでは、document.cookieプロパティを使うことで、簡単に名前付きのCookie（キーと値のペア）を設定できます。

この記事では、フォームに入力された顧客名を「name」という名前のCookieとして保存する具体例を紹介します。

名前付きCookieの設定方法

Cookieを設定する基本構文は以下のとおりです。

document.cookie = "名前=値";

このように、「名前=値」という形式の文字列をdocument.cookieに代入するだけで、Cookieが保存されます。複数のCookieを扱う場合は、それぞれ異なる名前を付けて設定します。

実装例：顧客名をCookieに保存する

次のコードは、テキストボックスに入力された名前を取得し、「name」という名前のCookieとして保存するサンプルです。入力が空の場合はアラートを表示して処理を中断します。

サンプルコード

<html>
<head>
  <script>
    function WriteCookie() {
      // 入力チェック：空の場合は警告を表示して終了
      if (document.myform.customer.value == "") {
        alert("何か値を入力してください！");
        return;
      }
      // 入力値をエンコードしてCookie形式に整形
      cookievalue = escape(document.myform.customer.value) + ";";
      // 「name」という名前でCookieを設定
      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()関数：入力値に含まれる特殊文字（セミコロンやカンマなど）をエンコードし、Cookieとして安全な形式に変換します。なお、現在ではより推奨されるencodeURIComponent()を使うのが一般的です。
  • セミコロンの付与：値の末尾に「;」を追加していますが、これは単一の属性のみを設定する場合には必須ではありません。有効期限（expires）やパス（path）などの属性を追加する際に区切り文字として使われます。
  • 入力チェック：空の値が送信されないよう、事前にバリデーションを行っています。

動作確認の手順

  1. 上記のコードをHTMLファイルとして保存し、ブラウザで開きます。
  2. テキストボックスに任意の名前を入力します。
  3. 「Cookieを設定」ボタンをクリックすると、画面に設定されたCookieの内容が表示されます。
  4. ブラウザの開発者ツール（F12キー）→「Application」タブ→「Cookies」から、保存されたCookieを確認できます。

まとめ

JavaScriptで名前付きCookieを設定するのは非常にシンプルで、document.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の値を判定し、ページの読み込み状