JavaScriptとCookie

クッキーとは？

WebブラウザとサーバーはHTTPプロトコルを使用して通信し、HTTPはステートレスプロトコルです。ただし、商用Webサイトの場合、異なるページ間でセッション情報を維持する必要があります。たとえば、多くのページを完了すると、1人のユーザー登録が終了します。しかし、すべてのWebページでユーザーのセッション情報を維持する方法。

多くの場合、Cookieの使用は、ユーザーの利便性やサイトの統計情報を改善するために必要な設定、購入、手数料、その他の情報を記憶および追跡する最も効率的な方法です。

使い方？

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

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

有効期限-Cookieの有効期限が切れる日付。これが空白の場合、訪問者がブラウザを終了すると、Cookieは期限切れになります。
ドメイン-サイトのドメイン名。
Path -Cookieを設定するディレクトリまたはWebページへのパス。任意のディレクトリまたはページからCookieを取得する場合、これは空白になる場合があります。
Secure -このフィールドに「secure」という単語が含まれている場合、Cookieはセキュアサーバーでのみ取得できます。このフィールドが空白の場合、そのような制限はありません。
Name = Value -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（）*関数も使用する必要があります。

例

以下を試してください。入力Cookieに顧客名を設定します。

<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 Cookie" onclick = "WriteCookie();"/>
      </form>
   </body>
</html>

出力

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

クッキーを読む

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

次のように、文字列をキーと値に分割するために、文字列の* split（）*関数を使用できます-

例

すべてのCookieを取得するには、次の例を試してください。

<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>

注-ここで*長さ*は、配列の長さを返す Array クラスのメソッドです。配列については別の章で説明します。その時までに、それを消化してみてください。

注意-マシンにはすでに他の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 = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

出力

クッキーを削除する

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 = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

出力

Javascript-cookies

JavaScriptとCookie

クッキーとは？

使い方？

クッキーの保存

例

出力

クッキーを読む

例

Cookieの有効期限の設定

例

出力

クッキーを削除する

例

出力

目次

Javascript-cookies

JavaScriptとCookie

クッキーとは？

使い方 ？

クッキーの保存

例

出力

クッキーを読む

例

Cookieの有効期限の設定

例

出力

クッキーを削除する

例

出力

使い方？