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

JavaScriptでCookieの有効期限を1時間に設定する方法

Cookieの寿命を現在のブラウザセッションを超えて延長したい場合は、有効期限（失効日時）を設定し、その日時をCookie自体に保存します。これを実現するには、expires属性に具体的な日時を指定します。

JavaScriptでCookieの有効期限を1時間に設定するには、現在の時刻に1時間分のミリ秒数（3600秒 × 1000）を加算した値をDateオブジェクトにセットし、その結果をtoUTCString()メソッドでUTC形式の文字列に変換してexpires属性に渡します。

サンプルコード

以下の例を実行すると、1時間後に期限切れとなるCookieを設定できます。

<html>
   <head>
      <script>
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setTime(now.getTime() + 1 * 3600 * 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>

コードのポイント

  • now.setTime(now.getTime() + 1 * 3600 * 1000)：現在時刻に1時間分のミリ秒を加算し、有効期限となる日時を算出しています。
  • now.toUTCString()：日時を、Cookieのexpires属性で要求されるUTC形式の文字列に変換します。
  • escape()：入力値をCookieとして安全に保存できるようエンコードします。なお、この関数は現在非推奨のため、実務ではencodeURIComponent()の使用が推奨されます。

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

最近のブラウザでは、秒数で有効期限を直接指定できるmax-age属性を利用することもできます。1時間後に期限切れにする場合はmax-age=3600と指定するだけで、より簡潔に記述できます。

document.cookie = "name=" + cookievalue + "; max-age=3600;";

expiresとmax-ageが同時に指定された場合、多くのブラウザではmax-ageが優先されます。用途に応じて使い分けるとよいでしょう。

  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"); 注意点