検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript での Cookie 操作オブジェクトのアプリケーションを整理する

JavaScript での Cookie 操作オブジェクトのアプリケーションを整理する

WBOY
WBOY転載
2022-08-05 11:35:331480ブラウズ

この記事では、javascript に関する関連知識を提供します。主に Cookie 操作オブジェクトのアプリケーションに関連する問題を紹介します。Cookie は、Web アプリケーションがユーザー関連の情報を保存する便利な方法を提供します。見てみましょう。以下の方法で、皆さんのお役に立てれば幸いです。

JavaScript での Cookie 操作オブジェクトのアプリケーションを整理する

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

Cookie の操作方法Javascript では

Cookie は、Web アプリケーションがユーザー関連の情報を保存する便利な方法を提供します。たとえば、ユーザーが当社のサイトを訪問すると、Cookie を使用してユーザー設定やその他の情報が保存され、次回ユーザーが当社のサイトを訪問したときにアプリケーションが以前に保存した情報を取得できるようになります。

Cookie とは一体何なのか

Cookie は、ユーザーのリクエストやページとともに Web サーバーとブラウザーの間で受け渡される小さなテキスト情報です。 Cookie に含まれる情報は、ユーザーがサイトにアクセスするたびに Web アプリケーションによって読み取ることができます。

Cookie は、ユーザー情報の保存の問題を解決するために登場しました。たとえば、

  • ユーザーが Web ページにアクセスすると、ユーザーの名前が Cookie に保存されることがあります。

  • ユーザーが次回ページにアクセスしたときに、Cookie はユーザー名を記憶します。

Cookie は、すべての Web ページにわたるユーザー情報を記憶できます。これには文字列形式の情報が含まれており、キーと値のペアの形式、つまり key=value 形式で保存されます。通常、各 Cookie は「;」で区切られます。 

username = Daisy Green

Cookie の欠点

Cookie が無効になる場合があります。ユーザーが個人のプライバシー保護に細心の注意を払う場合、ブラウザの Cookie 機能を無効にする可能性があります。

Cookie はブラウザに関連しています。つまり、同じページにアクセスした場合でも、異なるブラウザで保存された Cookie に相互にアクセスすることはできず、

Cookie は削除される可能性があります。各 Cookie はハード ディスク上のファイルであるため、ユーザーによって削除される可能性があります。

Cookie のセキュリティは十分に高くありません。すべての Cookie は平文形式でファイルに記録されるため、ユーザー名やパスワードなどの情報を保存したい場合は、事前に暗号化することをお勧めします。

Cooke の仕組み

サーバーは、Cookie の形式で訪問者のブラウザにデータを送信します。ブラウザが Cookie の受け入れを許可している場合。これは、訪問者のハード ドライブにプレーン テキストの記録として保存されます。

訪問者が別のページにジャンプすると、ブラウザは取得のために同じ Cookie をサーバーに送信します。取得されると、サーバーは以前に保存された内容を認識または記憶します。

Cookie の構成

Cookie HTTP ヘッダー情報のうち、HTTP Set-Cookie のヘッダー形式は次のとおりです。 code 具体例： 

Set-Cookie: name=value; [expires=date]; [path=path];
[domain=domainname]; [secure];

上記の形式からもわかるように、Cookie は以下の部分から構成されています。

名前と値のペア

名前と値はセミコロンで区切られます。Cookie には最大 20 のペアを含めることができます。各 Web ページには最大 1 つの Cookie を含めることができます。値の長さは 4K を超えてはなりません。 Value 値の場合は、encodeURIComponent を使用してエンコードするのが最善です。

ドメイン

ドメイン ドメイン名も Cookie の一部です。デフォルトでは、ユーザーが訪問した Web ページのドメイン名が Cookie に保存されます。この Cookie のドメイン名の値が設定されている場合、アクセスしているサーバーだけでなく、そのドメイン名のすべてのサーバーがこの Cookie にアクセスできることを意味します。通常はこれを行うべきではありません。ドメイン名を設定する形式は次のとおりです。domain=http://xyz.com

path

Web ページを特定のサーバーのディレクトリに設定します。 Cookie にアクセスします。パスを設定する形式は次のとおりです: path = /movies

Expires

Cookie の存続期間を設定します。デフォルトでは、Cookie は次の場合に自動的に削除されます。ユーザーがブラウザを閉じた場合、ユーザーがブラウザを閉じたときに Cookie が消えるように Cookie の有効期限を設定します。この項目を設定すると、Cookie の寿命を延ばすことができます。 Date オブジェクトの GMT 形式を使用して js で時刻を設定します。形式は次のとおりです:expires = date.toGMTString()

Secure

true または偽の値。 true の場合、Cookie は https 経由で送信される必要があります。

js Cookie

JS では、Document オブジェクトの cookie 属性を使用して cookie を操作できます。 JS は現在の Web ページの Cookie を読み取り、作成、変更、削除することができます。具体的な操作を見てみましょう。

Create Cookie

JS は document.cookie 属性を使用して Cookie を作成できます。次の方法で Cookie を作成できます: 

<meta http-equiv="set-cookie" content=" cookieName = cookieValue;
expires=01-Dec-2006 01:14:26 GMT; path=/" />

有効な日付 (UTC 時間) を追加することもできます。デフォルトでは、Cookie はブラウザを閉じるときに削除されます。 

document.cookie = "username=Daisy Green";

path パラメータを通じて、Cookie がどのパスに属しているかをブラウザに伝えることができます。デフォルトでは、Cookie は現在のページに属します。 

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";

Read Cookie

JS を通じて、次のような Cookie を読み取ることができます:

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2

事例：

<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(&#39;;&#39;);
                
               // Now take key value pair out of this array
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split(&#39;=&#39;)[0];
                  value = cookiearray[i].split(&#39;=&#39;)[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>      
   </head>
    
   <body>     
      <form name = "myform" action = "">
         <p> click the Button to View Result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

改变 cookie

通过使用 JS，咱们可以像创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

这样旧 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>

删除 cookie

删除 cookie 非常简单，不必指定 cookie 值：直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义 cookie 路径以确保删除正确的 cookie。如果不指定路径，有些浏览器不会让咱们删除 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视频教程、web前端】

以上がJavaScript での Cookie 操作オブジェクトのアプリケーションを整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：window.history オブジェクトのアプリケーションの概要次の記事：window.history オブジェクトのアプリケーションの概要

関連記事

続きを見る