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

JavaScriptでCookieの有効期限を30分に設定する方法

Cookieに有効期限（expiration date）を設定することで、ブラウザのセッションが終了した後もCookieを保持できるようになります。JavaScriptでは、「expires」属性に具体的な日時を指定することで、Cookieの寿命を自由にコントロールできます。

Cookieを30分後に失効させる仕組み

Cookieの有効期限を30分に設定するには、以下の手順で実装します。

  1. Date オブジェクトで現在の日時を取得する
  2. 現在時刻に30分（30 × 60 × 1000ミリ秒）を加算して、有効期限の時刻を計算する
  3. toUTCString() メソッドでUTC形式の文字列に変換し、expires 属性としてCookieに設定する

サンプルコード

次のコード例を実行して、Cookieが30分で期限切れになるように設定してみてください。

<html>
   <head>
      <script>
         <!--
            function WriteCookie() {
               var now = new Date();
               var minutes = 30;
               now.setTime(now.getTime() + (minutes * 60 * 1000));
               cookievalue = escape(document.myform.customer.value) + ";"

               document.cookie="name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>
   </head>
   <body>
      <form name="myform" action="">
         Enter name: <input type="text" name="customer"/>
         <input type="button" value="Set Cookie" onclick="WriteCookie()"/>
      </form>
   </body>
</html>

コードのポイント解説

  • 現在時刻の取得：new Date() で現在の日時を取得し、setTime() と getTime() を使って30分後の時刻を算出しています。
  • 文字列のエンコード：escape() 関数で入力値をエンコードしていますが、この関数は現在非推奨（deprecated）となっているため、新しいコードでは encodeURIComponent() を使用することが推奨されます。
  • 有効期限の指定：document.cookie に対して「expires=」に続けて toUTCString() で変換したUTC形式の日時を設定することで、Cookieが30分後に自動的に失効します。

このように、expires 属性を活用すれば、セッションを超えて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. JSPでCookieを設定する方法を3ステップでわかりやすく解説

    JSPでCookieを設定する基本の流れ JSPでCookieを扱う場合、基本的には次の3つのステップで設定を行います。 Cookieオブジェクトを作成する 有効期限（最大生存期間）を設定する HTTPレスポンスヘッダーにCookieを追加して送信する それぞれの手順を順番に見ていきましょう。 ステップ1：Cookieオブジェクトの作成 Cookieクラスのコンストラクタに、Cookieの名前と値（どちらも文字列）を引数として渡してオブジェクトを生成します。 Cookie cookie = new Cookie("key","value"); 注意点