ES6-クッキー

Webブラウザとサーバーは、HTTPプロトコルを使用して通信します。 HTTPはステートレスプロトコルです。つまり、クライアントが行った複数のリクエストにわたってクライアントのデータを保持しません。クライアントとサーバー間のこの完全な要求/応答サイクルは、*セッション*として定義されます。 Cookieは、ブラウザがユーザーのセッションに関連するデータを保存するために使用するデフォルトのメカニズムです。

使い方？

サーバーは、Cookieの形式で訪問者のブラウザにデータを送信します。ブラウザはCookieを受け入れる場合があります。存在する場合、訪問者のハードドライブにプレーンテキストレコードとして保存されます。これで、訪問者がサイトの別のページに到達すると、ブラウザは同じCookieをサーバーに送信して取得します。取得すると、サーバーは以前に保存されたものを認識または記憶します。

Cookieは、5つの可変長フィールドのプレーンテキストデータレコードです。

有効期限-Cookieの有効期限が切れる日付。これが空白の場合、訪問者がブラウザを終了すると、Cookieは期限切れになります。
ドメイン-サイトのドメイン名。
Path -Cookieを設定するディレクトリまたはWebページへのパス。任意のディレクトリまたはページからCookieを取得する場合、これは空白になる場合があります。
Secure -このフィールドに「secure」という単語が含まれている場合、Cookieはセキュアサーバーでのみ取得できます。このフィールドが空白の場合、そのような制限はありません。
名前=値-Cookieはキーと値のペアの形式で設定および取得されます。

クッキーはもともとCGIプログラミング用に設計されました。 Cookieに含まれるデータは、WebブラウザーとWebサーバー間で自動的に送信されるため、サーバー上のCGIスクリプトは、クライアント側に保存されているCookie値を読み書きできます。

JavaScriptは、Documentオブジェクトのcookieプロパティを使用してcookieを操作することもできます。 JavaScriptは、現在のWebページに適用されるCookieを読み取り、作成、変更、および削除できます。

クッキーの保存

Cookieを作成する最も簡単な方法は、次のような document.cookie オブジェクトに文字列値を割り当てることです。

"document.cookie = "key1 = value1; key2 = value2; expires = date";

ここでは、「expires」属性はオプションです。この属性に有効な日付または時刻を指定すると、指定された日付または時刻にCookieの有効期限が切れ、その後、Cookieの値にアクセスできなくなります。

注意-Cookieの値には、セミコロン、コンマ、または空白を含めることはできません。このため、Cookieに保存する前にJavaScript * escape（）関数を使用して値をエンコードすることができます。これを行う場合は、Cookie値を読み取るときに、対応する unescape（）*関数も使用する必要があります。

例

<html>
   <head>
      <script type = "text/javascript">
         function WriteCookie() {
            if( document.myform.customer.value == "" ){
               alert ("Enter some value!");
               return;
            }
            cookievalue =  escape(document.myform.customer.value) + ";";
            document.cookie = "name = " + cookievalue;
            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" onclick = "WriteCookie();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Cookies

これで、マシンにはnameというCookieがあります。複数のkey = valueのペアをコンマで区切って使用して、複数のCookieを設定できます。

クッキーを読む

cookieの読み取りは、 document.cookie オブジェクトの値がcookieであるため、書き込みと同じくらい簡単です。そのため、Cookieにアクセスするときはいつでもこの文字列を使用できます。 document.cookie 文字列は、名前がCookieの名前で、値がその文字列値であるセミコロンで区切られたname = valueのペアのリストを保持します。

次の例に示すように、ストリングの* split（）*関数を使用して、ストリングをキーと値に分割できます。

例

<html>
   <head>
      <script type = "text/javascript">
         function ReadCookie() {
            var allcookies  =  document.cookie;
            document.write ("All Cookies : " + allcookies );
         }
        //Get all the cookies pairs in an array
         cookiearray = allcookies.split(';');

        //Now take key value pair out of this array
         for(var i = 0; i<cookiearray.length; i++) {
            name  =  cookiearray[i].split('=')[0];
            value = cookiearray[i].split('=')[1];
            document.write ("Key is : " + name + " and Value is : " + value);
         }
      </script>
   </head>

   <body>
      <form name = "myform" action = "">
         <p> click the following button and see the result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>
   </body>
</html>

注意-ここで、lengthは配列の長さを返すArrayクラスのメソッドです。

マシンにはすでに他のCookieが設定されている場合があります。上記のコードは、マシンに設定されているすべてのCookieを表示します。

上記のコードが正常に実行されると、次の出力が表示されます。

Cookieの読み取り

Cookieの有効期限の設定

有効期限を設定し、Cookie内に有効期限を保存することにより、現在のブラウザセッションを超えてCookieの寿命を延ばすことができます。これは、「expires」属性に日付と時刻を設定することで実行できます。次の例は、Cookieの有効期限を1か月延長する方法を示しています。

例

<html>
   <head>
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() + 1 );
            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 = "formname" action = "">
         Enter Cookie Name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Cookieの有効期限

クッキーを削除する

Cookieを削除して、その後にCookieを読み取ろうとしても何も返されないようにする場合があります。これを行うには、有効期限を過去の時間に設定するだけです。次の例は、有効期限を現在の日付から1か月遅れて設定することにより、Cookieを削除する方法を示しています。

例

<html>
   <head>
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() - 1 );
            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 = "formname" action = "">
         Enter Cookie Name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

Cookieの削除

Es6-cookies

ES6-クッキー

使い方？

クッキーの保存

例

クッキーを読む

例

Cookieの有効期限の設定

例

クッキーを削除する

例

目次