長年にわたり、多くのWeb開発者はクライアント側にデータを保存する必要があります。 HTML5とその新しいメカニズムが登場する前に、すべての開発者は cookieを使用してこの目標を達成しました。残念ながら、JavaScriptでCookieを使用すると、多くのトラブルが発生する可能性があります。この記事では、Cookieとは何か、Cookieを作成、取得、削除する機能を構築する方法について説明します。
キーポイント
document.cookie属性を使用して、Cookieを作成、取得、削除できます。ただし、JavaScriptでCookieを処理することは、ネイティブの方法がないために困難な場合があります。開発者は通常、Cookieを管理するために独自の機能を作成する必要があります。 クッキーとは何ですか？
Cookieは、Webサイトから送信され、ユーザーのブラウザによってローカルに保存されるデータです。 httpがstateless であるため、Cookieが必要です。これは、HTTP自体がユーザーの以前のアクティビティを追跡できないことを意味します。 Cookieを使用することは、状態を作成する方法です。
クッキーを使用していますか？
今、ほとんどすべてのWebサイトがCookieを使用しています。ただし、Cookieは最大4kbのデータしか保存できないため、非常に限られています。さらに、多くの開発者は、CookieがHTTP要求を要求するたびにサーバーに送信されるため、大型Cookieがパフォーマンスに影響を与える多くのネットワーク帯域幅を消費すると主張しています。 Remy Sharpは、HTML5を紹介する共著の本で、Cookieに対する別の重要な批判をしました。これは、モバイル接続にとって悲惨なものになる可能性があります。覚えておくべきもう1つの重要なことは、ヨーロッパの訪問者がいる場合、あなたのウェブサイトは2012年5月26日のEU電子プライバシー指令に準拠する必要があるということです。これを聞いたことがない場合は、今ヨーロッパであなたのウェブサイトが違法な理由をチェックしてください。近年、人々はCookieの代替品を見つけようとしています。 HTML5の出現により、いくつかの新しいテクノロジーが登場しています。 1つ目は、Name-Valueペアを保存する方法を備えたWebストレージAPIです。 WebストレージAPIの概要については、WebストレージAPIの概要を読むことをお勧めします。 2番目の選択肢は、SQLバリアントを使用して照会できるデータベースにデータを保存するWeb SQLデータベースAPIです。 Web SQLはよくサポートされていますが、この標準は積極的に維持されなくなりました。最後になりましたが、インデックスデータベースAPIは、単純な値と階層オブジェクトを保持するレコードを含むデータベースを定義します。 indexedDBの詳細については、「HTML5 IndexEdDBの詳細な学習」をご覧ください。残念ながら、indexedDBは広くサポートされていないため、おそらく頼るべきではありません。どんな方法でも、知っておくべき重要なポイントがいくつかあります。これらのAPIはすべてCookieと同様のローカルストレージを提供しますが、データをサーバーに送り返しません。したがって、ほとんどの場合、CookieとストレージAPIの1つの両方を使用します。技術的には、AJAXを使用して同じ効果を達成できますが、これによりタスクを過度に複雑にし、追加のコードが必要です。
クッキーの作り方
クッキーの構造は非常にシンプルです。キー価値のペアがいくつかあります。ペアはセミコロンで分離され、等記号文字はキーをその値から分離します。 Cookieは有効期限があるように選択でき、有効期限後に削除されます。有効期限が提供されていない場合、セッションまたはブラウザが閉じるまでCookieは続きます。有効期限を過去に設定すると、ブラウザはCookieを削除します。日付の形式はUTC/GMTでなければならないため重要であることに注意してください。さらに、Cookieを読み書きできるドメインとパスを指定できます。デフォルトでは、パス値は「/」です。つまり、Cookieは特定のドメイン内のすべてのパスに表示されます。ドメインを指定しない場合、Cookieが設定されているページに属します。このデータの設定方法も重要です。順序は次のとおりです。次の例は、ドメインのすべてのパスでアクセスできる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がどの関数がそれらを処理するかを確認する時が来ました。残念ながら、私が言いたい最初のことは、JavaScriptには簡単なクッキーを処理するためのネイティブな方法がないということです。 javaScriptは、属性を使用してCookieを作成、取得、削除できますが、これは満足のいくものではありません。あなたがdocument.cookie、split()、およびループに対処する必要があるたびに。 substring()を文字列変数と考えることはできますが、実際には文字列変数以上のものであることに注意してください。たとえば、次のスクリプトを参照してください
document.cookie
<code>visits=3; path=/;</code>
document.cookieこれまでのところ、JavaScriptでCookieを処理することの難しさを見てきました。だから今こそ、簡単に管理するために独自の関数を作成する時です。次の機能は、Cookieを作成するのに役立ちます。
<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>
expiresこのようにこの関数を呼び出すことができます。
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;";
クッキーを設定したので、それらを取得できる必要があります。これは、指定されたキーと次の
関数を使用して行います。見つかった場合、キーの値を返し、それ以外の場合は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を削除するために最後の関数が必要です。表示される関数は、指定された名前が設定されているかどうかをテストし、有効期限を過去に設定するためにテストするために依存するため、非常に簡単です。
createCookie("website", "audero.it", new Date(new Date().getTime() + 10000));
createCookie("author", "aurelio", 30);
getCookie()表示された関数を使用すると、Cookieを簡単に管理できます。ネットワーク上には、他にも多くのCookie処理機能があります。あなたが見つけることができる多数の機能の中で、私はあなたにquirksmode.comでフロントエンド開発の第一人者Peter-Paul Koch（P.P.K.）によって書かれた機能をあなたに見せたいと思います。この記事にそれらを含めることを許可してくれた彼に感謝したいと思います。 P.P.K.クッキーを作成する機能を以下に示します。 createCookie()
function getCookie(name) {
var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
var result = regexp.exec(document.cookie);
return (result === null) ? null : result[1];
}これは、Cookieを削除する関数です。
console.log(getCookie("author")); // 打印 aurelio
console.log(getCookie("nothing")); // 打印 null
function deleteCookie(name, path, domain) {
// 如果 Cookie 存在
if (getCookie(name))
createCookie(name, "", -1, path, domain);
}deleteCookie("author");
console.log(getCookie("author")); // 现在打印 nullJavaScriptの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=/";
}以上がJavaScriptのCookieを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
