長年にわたり、多くのWeb開発者はクライアント側(cè)にデータを保存する必要があります。 HTML5とその新しいメカニズムが登場する前に、すべての開発者は cookieを使用してこの目標(biāo)を達(dá)成しました。殘念ながら、JavaScriptでCookieを使用すると、多くのトラブルが発生する可能性があります。この記事では、Cookieとは何か、Cookieを作成、取得、削除する機(jī)能を構(gòu)築する方法について説明します。

キーポイント

• Cookieは、Webサイトから送信され、ユーザーのブラウザによってローカルに保存されているデータの斷片です。 HTTPはステートレスであるため、ユーザーアクティビティを追跡するために使用されます。ただし、Cookieは最大4kbのデータしか保存できず、各HTTP要求がサーバーに送信され、ネットワーク帯域幅を消費(fèi)できます。
• HTML5の結(jié)果として、Cookieの代替品が登場しました。これらには、WebストレージAPI（ストレージ名valueペア）とWeb SQLデータベースAPI（SQLバリアントを使用してクエリをかけることができるデータベースのストレージデータ）が含まれます。もう1つの選択肢は、単純な値と階層オブジェクトを保持するレコードを含むデータベースを定義するインデックスデータベースAPIです。
• javaScriptはdocument.cookie屬性を使用して、Cookieを作成、取得、削除できます。ただし、JavaScriptでCookieを処理することは、ネイティブの方法がないために困難な場合があります。開発者は通常、Cookieを管理するために獨(dú)自の機(jī)能を作成する必要があります。
• Cookieには、セミコロン分離されたキー価値ペアで構(gòu)成される?yún)g純な構(gòu)造があり、キーと値は等しい符號で區(qū)切られています。それらはオプションで有効期限を持つことができ、有効期限後に削除されます。有効期限が提供されていない場合、セッションまたはブラウザが閉じるまでCookieは続きます。また、Cookieに読み書きできるドメインとパスを指定することもできます。

クッキーとは何ですか？

Cookieは、Webサイトから送信され、ユーザーのブラウザによってローカルに保存されるデータです。 httpがstateless であるため、Cookieが必要です。これは、HTTP自體がユーザーの以前のアクティビティを追跡できないことを意味します。 Cookieを使用することは、狀態(tài)を作成する方法です。

クッキーを使用していますか？

今、ほとんどすべてのWebサイトがCookieを使用しています。ただし、Cookieは最大4kbのデータしか保存できないため、非常に限られています。さらに、多くの開発者は、CookieがHTTP要求を要求するたびにサーバーに送信されるため、大型Cookieがパフォーマンスに影響を與える多くのネットワーク帯域幅を消費(fèi)すると主張しています。 Remy Sharpは、HTML5を紹介する共著の本で、Cookieに対する別の重要な批判をしました。これは、モバイル接続にとって悲慘なものになる可能性があります。覚えておくべきもう1つの重要なことは、ヨーロッパの訪問者がいる場合、あなたのウェブサイトは2012年5月26日のEU電子プライバシー指令に準(zhǔn)拠する必要があるということです。これを聞いたことがない場合は、今ヨーロッパであなたのウェブサイトが違法な理由をチェックしてください。近年、人々はCookieの代替品を見つけようとしています。 HTML5の出現(xiàn)により、いくつかの新しいテクノロジーが登場しています。 1つ目は、Name-Valueペアを保存する方法を備えたWebストレージAPIです。 WebストレージAPIの概要については、WebストレージAPIの概要を読むことをお勧めします。 2番目の選択肢は、SQLバリアントを使用して照會できるデータベースにデータを保存するWeb SQLデータベースAPIです。 Web SQLはよくサポートされていますが、この標(biāo)準(zhǔn)は積極的に維持されなくなりました。最後になりましたが、インデックスデータベースAPIは、単純な値と階層オブジェクトを保持するレコードを含むデータベースを定義します。 indexedDBの詳細(xì)については、「HTML5 IndexEdDBの詳細(xì)な學(xué)習(xí)」をご覧ください。殘念ながら、indexedDBは広くサポートされていないため、おそらく頼るべきではありません。どんな方法でも、知っておくべき重要なポイントがいくつかあります。これらのAPIはすべてCookieと同様のローカルストレージを提供しますが、データをサーバーに送り返しません。したがって、ほとんどの場合、CookieとストレージAPIの1つの両方を使用します。技術(shù)的には、AJAXを使用して同じ効果を達(dá)成できますが、これによりタスクを過度に複雑にし、追加のコードが必要です。

クッキーの作り方

クッキーの構(gòu)造は非常にシンプルです。キー価値のペアがいくつかあります。ペアはセミコロンで分離され、等記號文字はキーをその値から分離します。 Cookieは有効期限があるように選択でき、有効期限後に削除されます。有効期限が提供されていない場合、セッションまたはブラウザが閉じるまでCookieは続きます。有効期限を過去に設(shè)定すると、ブラウザはCookieを削除します。日付の形式はUTC/GMTでなければならないため重要であることに注意してください。さらに、Cookieを読み書きできるドメインとパスを指定できます。デフォルトでは、パス値は「/」です。つまり、Cookieは特定のドメイン內(nèi)のすべてのパスに表示されます。ドメインを指定しない場合、Cookieが設(shè)定されているページに屬します。このデータの設(shè)定方法も重要です。順序は次のとおりです。次の例は、ドメインのすべてのパスでアクセスできるCookieと、キー価値ペアが1つだけであることを示しています。

<code>visits=3; path=/;</code>

次の例は、ドメインのすべてのパス（デフォルトIS）でアクセス可能なCookieにアクセスできることを示しており、2012年10月31日の午前11:00に期限切れになります。

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

スクリプトcookies

これまでのところ、私はCookieとは何か、そして彼らの長所と短所のいくつかを説明しました。次に、JavaScriptがどの関數(shù)がそれらを処理するかを確認(rèn)する時が來ました。殘念ながら、私が言いたい最初のことは、JavaScriptには簡単なクッキーを処理するためのネイティブな方法がないということです。 javaScriptは、屬性を使用してCookieを作成、取得、削除できますが、これは満足のいくものではありません。あなたがdocument.cookie、split()、およびループに対処する必要があるたびに。 substring()を文字列変數(shù)と考えることはできますが、実際には文字列変數(shù)以上のものであることに注意してください。たとえば、次のスクリプトを參照してください document.cookie

<code>visits=3; path=/;</code>

を印刷すると、以下に示すように予期しない結(jié)果が得られます。

document.cookieこれまでのところ、JavaScriptでCookieを処理することの難しさを見てきました。だから今こそ、簡単に管理するために獨(dú)自の関數(shù)を作成する時です。次の機(jī)能は、Cookieを作成するのに役立ちます。

パラメーターは、日付オブジェクトのインスタンスまたは日數(shù)を表す數(shù)値であることに注意してください。後者は負(fù)の數(shù)になる可能性があり、これにより有効期限が過去に設(shè)定されます。

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

expiresこのようにこの関數(shù)を呼び出すことができます。

document.cookie = "visits=3; path=/;";
document.cookie = "last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;";

クッキーを設(shè)定したので、それらを取得できる必要があります。これは、指定されたキーと次の

関數(shù)を使用して行います。見つかった場合、キーの値を返し、それ以外の場合はnullを返します。

console.log(document.cookie);
// 打印 visits=3; last-visit=Mon, 15 Oct 2012 19:36:00

getCookie()

の使用は非常に簡単です。以下に示すように、キーをパラメーターとして渡すだけです。

function createCookie(name, value, expires, path, domain) {
  var cookie = name + "=" + escape(value) + ";";

  if (expires) {
    // 如果是日期
    if(expires instanceof Date) {
      // 如果不是有效的日期
      if (isNaN(expires.getTime()))
       expires = new Date();
    }
    else
      expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);

    cookie += "expires=" + expires.toGMTString() + ";";
  }

  if (path)
    cookie += "path=" + path + ";";
  if (domain)
    cookie += "domain=" + domain + ";";

  document.cookie = cookie;
}

getCookie()ここで、Cookieを削除するために最後の関數(shù)が必要です。表示される関數(shù)は、指定された名前が設(shè)定されているかどうかをテストし、有効期限を過去に設(shè)定するためにテストするために依存するため、非常に簡単です。

createCookie("website", "audero.it", new Date(new Date().getTime() + 10000));
createCookie("author", "aurelio", 30);

この関數(shù)を考慮して、Cookieを削除するには、単純に書くことができます。

getCookie()表示された関數(shù)を使用すると、Cookieを簡単に管理できます。ネットワーク上には、他にも多くのCookie処理機(jī)能があります。あなたが見つけることができる多數(shù)の機(jī)能の中で、私はあなたにquirksmode.comでフロントエンド開発の第一人者Peter-Paul Koch（P.P.K.）によって書かれた機(jī)能をあなたに見せたいと思います。この記事にそれらを含めることを許可してくれた彼に感謝したいと思います。 P.P.K.クッキーを作成する機(jī)能を以下に示します。 createCookie()

同様に、Cookieを取得するには、次の関數(shù)を使用します。

function getCookie(name) {
  var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
  var result = regexp.exec(document.cookie);
  return (result === null) ? null : result[1];
}

これは、Cookieを削除する関數(shù)です。

console.log(getCookie("author")); // 打印 aurelio
console.log(getCookie("nothing")); // 打印 null

function deleteCookie(name, path, domain) {
  // 如果 Cookie 存在
  if (getCookie(name))
    createCookie(name, "", -1, path, domain);
}

結(jié)論

deleteCookie("author");
console.log(getCookie("author")); // 現(xiàn)在打印 null

この記事では、クッキーが何であるか、どのように作られているのか、長所と短所を?qū)Wびました。また、カスタム関數(shù)を使用してCookieを処理する方法も學(xué)びました。以前の投稿で指摘したように、JavaScriptにはいくつかの基本的なユーティリティ関數(shù)が欠落しています。幸いなことに、獨(dú)自の機(jī)能を簡単に構(gòu)築したり、ネットワークを検索して問題を解決したりできます。

JavaScriptのCookieの取り扱いに関する

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

FAQ（FAQS）（長さが長すぎて擬似オリジナルの目標(biāo)と一致しないため、FAQパーツはここで省略されています。FAQパーツの內(nèi)容は元のテキストと非常に一致しており、擬似原産性は困難です。したがって、元のテキストを保管してください。）

以上がJavaScriptのCookieを処理する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。