JavaScript Cookie の理解と使用

JavaScript Cookie はキャッシュにおいて重要な役割を果たします。この記事では、それについていくつか紹介します。

Cookie は、コンピューター上のテキスト ファイルに保存されるデータです。

Web サーバーが Web ページをブラウザーに送信するとき、接続が閉じられた後、サーバーはユーザーの情報を記録しません。

Cookieの役割は、「クライアント側でユーザー情報を記録する方法」を解決することです:

ユーザーがWebページにアクセスすると、そのユーザーの名前がCookieに記録されます。

次回ユーザーがこのページにアクセスすると、Cookie 内のユーザーのアクセス記録を読み取ることができます。

Cookie は、以下に示すように、名前と値のペアとして保存されます。

username=John Doe

ブラウザがサーバーから Web ページをリクエストすると、そのページに属する Cookie がリクエストに追加されます。このようにしてサーバーはユーザー情報を取得します。

JavaScript を使用して Cookie を作成します

JavaScript は document.cookie 属性を使用して Cookie を作成、読み取り、削除できます。

JavaScript で、次のような Cookie を作成します:

document.cookie="username=John Doe";

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

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

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

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

JavaScript を使用して Cookie を読み取る

JavaScript では、次のコードを使用して Cookie を読み取ることができます。 cookie2=value; cookie3=value;

JavaScript を使用して Cookie を変更する

JavaScript では、Cookie を変更することは、次のように Cookie を作成することと似ています:

var x = document.cookie;

古い Cookie は上書きされます。

JavaScriptを使用してCookieを削除する

Cookieを削除するのは非常に簡単です。以下に示すように、expires パラメータを前回の時刻に設定する必要があるだけです。「Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

」に設定します。削除するときに Cookie の値を指定する必要はないことに注意してください。それ。

Cookie 文字列

document.cookie プロパティは通常のテキスト文字列のように見えますが、そうではありません。

document.cookie に完全な Cookie 文字列を記述した場合でも、Cookie 情報を再度読み取ると、Cookie 情報は名前と値のペアの形式で表示されます。

新しいCookieを設定しても、古いCookieは上書きされません。 新しい Cookie が document.cookie に追加されるので、document.cookie を再度読み取ると、次のようなデータが得られます:

cookie1=value; cookie2=value;

すべての Cookie を表示 Cookie の作成 1 Cookie の作成 2 Cookie の削除1 Cookie を削除します 2

特定の Cookie 値を検索する必要がある場合は、Cookie 文字列内の Cookie 値を検索する JavaScript 関数を作成する必要があります。

JavaScript Cookie の例

次の例では、訪問者名を保存するための Cookie を作成します。

まず、訪問者はウェブページにアクセスし、名前を記入するよう求められます。この名前は Cookie に保存されます。

次回訪問者がページにアクセスすると、ウェルカム メッセージが表示されます。

この例では、3 つの JavaScript 関数を作成します:

Cookie 値を設定する関数

Cookie 値を取得する関数

Cookie 値を検出する関数

Cookie 値を設定する関数

まず、関数を作成します。訪問者の名前を格納:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

関数分析:

上記の関数パラメータのうち、Cookie の名前は cname、Cookie の値は cvalue、Cookie の有効期限が設定されます。

この関数は、Cookie 名、Cookie 値、Cookie の有効期限を設定します。

Cookieの値を取得する関数

次に、指定されたCookieの値を返す関数userを作成します:

function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;}

関数分析:

Cookie名のパラメータはcnameです。

指定された Cookie を取得するためのテキスト変数を作成します: cname + "=。

セミコロンを使用して document.cookie 文字列を分割し、分割された文字列配列を ca に割り当てます (ca = document.cookie.split(';'))。

ca 配列 (i=0;i

Cookieが見つかった場合(c.indexOf(name) == 0)、Cookieの値(c.substring(name.length,c.length)を返します。

Cookieが見つからなかった場合は、「」を返します。

Cookie 値の検出関数

最後に、Cookie が作成されたかどうかを検出する関数を作成できます。

Cookie が設定されている場合は、挨拶メッセージが表示されます。

Cookie が設定されていない場合は、ポップアップが表示されます。アップウィンドウが表示され、訪問者に名前を尋ね、setCookie 関数を呼び出して訪問者の名前を 365 日間保存します:

function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";}

完全な例

Example

function setCookie(cname,cvalue,exdays){
    var d = new Date();    d.setTime(d.getTime()+(exdays*24*60*60*1000));    var expires = "expires="+d.toGMTString();    document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname){
    var name = cname + "=";    var ca = document.cookie.split(&#39;;&#39;);    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";}function checkCookie(){
    var user=getCookie("username");    if (user!=""){
        alert("欢迎 " + user + " 再次访问");    }
    else {
        user = prompt("请输入你的名字:","");          if (user!="" && user!=null){
            setCookie("username",user,30);        }
    }}

本篇对相关cookie的相关知识做出了一些了解，更多的学习资料清关注php中文网即可观看。

相关推荐：

JavaScript 弹窗事件的相关知识

JavaScript typeof, null, 和 undefined的相关知识

JavaScript RegExp 对象的使用介绍

以上がJavaScript Cookie の理解と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。