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

JavaScriptでホームページ専用のCookieを設定する方法

サイトのトップページなど、特定のページだけで有効なCookieを設定したい場合は、Cookieを書き込む前に「現在表示しているページがそのページかどうか」を判定する処理を追加します。

JavaScriptでは window.location.pathname を使うことで現在のページのパスを取得できます。この値をチェックし、対象ページ（例：home.html）と一致した場合にのみ document.cookie でCookieを書き込めば、ホームページ専用のCookieを実現できます。

実装例

以下は、フォームに入力された名前をCookieとして保存するサンプルコードです。「Cookieを設定」ボタンをクリックすると、現在のページが home.html である場合に限りCookieが設定されます。

<html>
   <head>
      <script>
         function WriteCookie() {
            if( document.myform.customer.value == "" ){
               alert("値を入力してください！");
               return;
            }
            cookievalue = escape(document.myform.customer.value) + ";";

            var myPath = window.location.pathname;
            var address = myPath.split("/");

            if ((address[address.length - 1]).toLowerCase() == "home.html") {
               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>

コードのポイント

  • window.location.pathname で現在のページのパスを取得します。
  • パスを「/」で分割し、末尾のファイル名を小文字に変換したうえで「home.html」と一致するかを比較します。
  • 一致した場合のみ document.cookie = "name=" + cookievalue; を実行してCookieを保存します。
  • escape() で入力値をエンコードしているため、特殊文字が含まれていても安全に保存できます。

なお、escape() は非推奨の関数です。近年のブラウザ向けに開発する場合は、より安全な encodeURIComponent() の使用が推奨されます。

このようにページ判定の条件分岐を挟むことで、意図しないページでCookieが上書きされるのを防ぎ、ホームページ専用のCookieを安全に運用することができます。

  1. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo

  2. JavaScriptで文字列をオブジェクトのキーとして設定する方法

    JavaScriptで文字列をオブジェクトのキーとして設定する方法 JavaScriptでは、文字列の値を持つ変数を、そのままオブジェクトのプロパティ名（キー）として利用できます。これを実現するのが「算出プロパティ名（Computed Property Names）」と呼ばれる構文で、ブラケット [] の中に変数を指定するだけでOKです。 例えば、次のような文字列があるとします。 const keyName = username; この文字列をオブジェクトのキーとして設定するには、[] を使って文字列が格納された変数名を渡します。 const stringToObject = { [key