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

JavaScriptでCookieの有効期限を設定する方法をわかりやすく解説

Cookieの有効期限を設定し、その期限日をCookie自体に保存することで、現在のブラウザセッションが終了した後もCookieを保持し続けることができます。具体的には、expires属性に有効期限となる日時を指定します。

expires属性による有効期限の設定方法

Cookieに有効期限を設定するには、document.cookieに対して「expires=日時」という形式の文字列を追加します。日時はtoUTCString()メソッドで取得できるUTC形式の文字列で指定するのが一般的です。

サンプルコード：有効期限を1か月後に設定する

以下のサンプルでは、フォームに入力された名前をCookieに保存し、有効期限を現在の日時から1か月後に設定しています。実際にブラウザで動作を確認してみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Cookieの有効期限を設定する</title>
    <script>
      function WriteCookie() {
        // 現在日時から1か月後の日時を算出
        var now = new Date();
        now.setMonth(now.getMonth() + 1);

        // 入力値をエンコードしてCookie値を作成
        var cookievalue = escape(document.myform.customer.value) + ";";

        // Cookieの値と有効期限を設定
        document.cookie = "name=" + cookievalue;
        document.cookie = "expires=" + now.toUTCString() + ";";

        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>

コードのポイント解説

  • new Date()で現在の日時を取得し、setMonth(now.getMonth() + 1)によって1か月後の日時を算出しています。
  • escape()関数で入力値をエンコードし、Cookie値として安全な形式に変換しています。なお、escape()は非推奨の関数のため、現代の開発ではencodeURIComponent()の使用が推奨されます。
  • toUTCString()で日時をUTC形式の文字列に変換し、expires属性としてCookieに設定しています。

補足：max-age属性を使う方法

最近のブラウザでは、秒数で有効期間を指定できるmax-age属性を利用することもできます。例えば、30日（1か月）後に期限を設定する場合は次のように記述します。

document.cookie = "name=" + cookievalue + "; max-age=" + 60 * 60 * 24 * 30 + ";";

expires属性とmax-age属性の両方が指定された場合、多くのブラウザではmax-ageが優先されます。また、セキュリティを高めるためには、Secure属性（HTTPS通信でのみ送信）やSameSite属性（クロスサイトリクエストへの送信制御）を併せて指定することも推奨されます。

  1. JavaScriptで現在の時刻を別のタイムゾーンの時刻に変更して表示する方法

    JavaScriptのDateオブジェクトは、端末（システム）に設定されている時刻をそのまま取得して現在の日付・時刻を表示します。そのため、JavaScript単体でシステム時刻そのものを書き換えることはできません。 しかし、UTC（協定世界時）との時差であるタイムゾーンオフセットを計算に組み込むことで、あたかも別の時刻が設定されたかのように表示することが可能です。以下では、シンガポール（GMT+8）の時刻を求めるサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html>    <body>  

  2. JavaScriptで日付の「日」を設定する方法｜setDate()の使い方を解説

    JavaScriptでは、DateオブジェクトのsetDate()メソッドを使うことで、日付の「日」（1〜31）を設定・変更できます。この記事では、実際のコード例と実行結果をもとに、setDate()の基本的な使い方をわかりやすく解説します。 setDate()メソッドとは setDate()は、Dateオブジェクトの「日」の値だけを変更するためのメソッドです。年や月はそのままに、日にちだけを差し替えたい場合に便利です。引数には1〜31の整数を指定しますが、範囲外の値を渡してもエラーにはならず、自動的に月をまたいだ日付へと調整されます。また、このメソッドは元のDateオブジェクト自体を書き換え