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

JavaScriptで特定のページにのみCookieを設定する方法

Webサイト全体ではなく、特定のページにのみCookieを設定したいケースは少なくありません。そんなときに役立つのが、JavaScriptの「window.location.pathname」プロパティです。このプロパティは、現在表示しているページのパスとファイル名（例：/demo/page.html）を返すため、これをCookieのpath属性に指定することで、Cookieの有効範囲をそのページだけに限定できます。

Cookieのpath属性とは

Cookieには「path」という属性があり、どのパスに対してCookieを送信するかを制御できます。path属性を指定しない場合、Cookieはデフォルトで現在のディレクトリ配下全体に適用されます。一方、特定のページのパスを明示的に指定すれば、そのページへアクセスしたときにのみCookieが送信されるようになります。

実装例

以下のコードは、フォームに入力された名前をCookieとして保存し、そのCookieを現在のページ（window.location.pathnameで取得したパス）に限定して設定するサンプルです。

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

        document.cookie = "name=" + cookievalue + ";path=" + myPath;
        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：現在のページのパス（例：/demo/page.html）を取得します。
  • escape()：入力値に含まれる特殊文字をエンコードし、Cookieとして安全な形式に変換します。ただし、escape()は非推奨となっているため、現在の開発ではencodeURIComponent()の使用が推奨されています。
  • path属性への動的な指定：取得したパスを「path=」の後に「+」で連結して指定します。ここで注意したいのは、変数myPathをそのまま文字列リテラルとして記述してしまう（例：path=myPath）と、リテラル文字列がそのまま設定されてしまい、意図した動作にならないという点です。必ず変数の値を連結するようにしてください。

まとめ

特定のページにのみCookieを設定するには、window.location.pathnameで現在のページのパスを取得し、それをCookieのpath属性に動的に指定します。これにより、Cookieの適用範囲を必要なページだけに絞り込むことができ、サイト内の他のページへの不要な影響を防げます。

  1. JavaScriptでページを印刷するにはどうすればよいですか？

    JavaScriptでページを印刷するには、print()メソッドを使用します。このメソッドを呼び出すと、ブラウザの標準的な印刷ダイアログボックスが開き、どのプリンターを使用するか、部数はいくつにするかといった印刷オプションを簡単に設定できます。以下は、実際に印刷ダイアログが表示された様子の例です。サンプルコード次のコードを実行すると、ボタンをクリックするだけでページを印刷できる動作を確認できます。<!DOCTYPE html> <html>     <body>     &nb

  2. JavaScriptでHTMLページをリダイレクトする方法をわかりやすく解説

    ページリダイレクトとは？あるURLをクリックしてページXにアクセスしたはずなのに、実際には別のページYに移動された——そんな経験はありませんか？これは「ページリダイレクト」と呼ばれる仕組みによるものです。Web開発では、サイト移転時や古いURLから新しいURLへの誘導など、さまざまな場面で活用されています。JavaScriptでリダイレクトを実装するJavaScriptを使えば、クライアント側（ブラウザ側）で非常にシンプルにページリダイレクトを実現できます。特別なライブラリやサーバー側の設定は不要で、window.location.assign()メソッドを呼び出すだけでOKです。訪問者を新し