クッキーとは何ですか
「Cookieは訪問者のコンピューターに保存されている可変です。このCookieは、同じコンピューターがブラウザを介してページを要求するたびに送信されます。JavaScriptを使用して、Cookieの値を作成および取得できます。」 -w3school
Cookieは、訪問されたWebサイトによって作成されたファイルであり、プロファイル情報などの閲覧情報を保存するために使用されます。
JavaScriptの観点から見ると、Cookieは文字列情報です。この情報は、クライアントのコンピューターに保存され、クライアントコンピューターとサーバー間の情報を渡すために使用されます。
この情報は、javascriptのdocument.cookieを介して読み取ることもできます。 Cookieは主にクライアントとサーバー間の通信に使用されるため、JavaScriptに加えて、サーバー言語（PHPなど）もCookieにアクセスできます。
クッキーの基本
Cookieにはサイズの制限があります。各Cookieに保存されているデータは、4kbを超えることはできません。 Cookie文字列の長さが4kbを超える場合、このプロパティは空の文字列を返します。
Cookieは最終的にクライアントコンピューターにファイルの形で保存されるため、Cookieを表示および変更するのは非常に便利です。そのため、Cookieは重要な情報を保存できないとよく言われます。
各クッキーの形式は次のとおりです。<cookie name> = <value>;名前と価値の両方は、法的識別子でなければなりません。
Cookieは期間有効です。デフォルトでは、ブラウザが閉じるとクッキーのライフサイクルが終了します。ブラウザの電源を切った後にCookieを使用できるようにしたい場合は、Cookieの有効期限であるCookieの有効期間を設定する必要があります。
アラート（typeof document.cookie）結果は文字列です。私はそれが配列だと思っていました、そして私は冗談を言いました...
Cookieには、ドメインとパスの概念があります。ドメインはドメインの概念です。ブラウザはセキュリティ志向の環境であるため、異なるドメインは互いにCookieにアクセスできません（もちろん、特別な設定を通じてクロスドメインアクセスを実現できます）。パスはルーティングの概念です。 Webページによって作成されたCookieは、このWebページと同じディレクトリまたはサブディレクトリ内のすべてのWebページでのみアクセスできますが、他のディレクトリではアクセスできません（この文は少し混乱しており、しばらくして簡単に理解できます）。
実際、Cookieを作成する方法は、変数を定義する方法に多少似ています。どちらもCookie名とCookie値の使用が必要です。同じWebサイトで複数のCookieを作成でき、同じCookieファイルに複数のCookieを保存できます。
Cookie FAQ
クッキーには2つのタイプがあります。
あなたが閲覧している現在のウェブサイトによって設定されたCookie
Webページに広告や画像を埋め込むなど、他のドメインソースからのサードパーティCookie（Webサイトは、これらのCookieを使用して使用情報を追跡できます）
基本的な知識は、今ではCookieのライフサイクルの問題について言及しました。実際、Cookieはほぼ2つの状態に分けることができます。
一時的なクッキー。現在の使用プロセス中、ウェブサイトは個人情報を保存し、ブラウザが閉じた後、情報はコンピューターから削除されます。
有効期限に合わせてCookieを設定します。ブラウザがオフになっていても、情報業界はまだコンピューターにあります。ログイン名やパスワードなど、特定のサイトに行くたびにログインする必要はありません。このクッキーは、数日、数ヶ月、または何年もの間コンピューターに保管できます
クッキーをクリアするには2つの方法があります。
ブラウザツールを介したクリアクッキーをクリアします（サードパーティツールがあり、ブラウザ自体にもこの機能があります）
Cookieの有効期間を設定してCookieをクリアします
注：Cookieを削除すると、いくつかのWebページが適切に機能しない場合があります
ブラウザは、設定を介してCookieへのアクセスを受け入れて拒否できます。
機能的およびパフォーマンス上の理由から、使用するCookieの数を最小限に抑え、可能な限り小さなCookieを使用することをお勧めします。
Cookieエンコーディングの詳細は、Cookie Advanced Articleで個別に紹介されます。
ローカルディスク上のページの場合、ChromeコンソールはJavaScriptを使用してCookieを読み書きすることはできません。解決策は...ブラウザを変更することです^_^。
Cookieの基本的な使用
1.簡単なアクセス操作
JavaScriptを使用してCookieにアクセスする場合、ドキュメントオブジェクトのCookie属性を使用する必要があります。コードの行は、Cookieを作成および変更する方法を紹介します。
コードコピーは次のとおりです。
document.cookie = 'username = darren';
上記のコードでは、「ユーザー名」はCookie名を表し、「Darren」はこの名前に対応する値を表します。 Cookie名が存在しないと仮定すると、新しいCookieが作成されます。存在する場合、Cookie名に対応する値が変更されます。 Cookieを複数回作成する場合は、この方法を繰り返し使用してください。
2。クッキーリーディング操作
実際には、クッキーを正確に読むのは非常に簡単です。これは、文字列で動作することです。このコードをw3schoolでコピーして分析します。
コードコピーは次のとおりです。
function getCookie（c_name）{
if（document.cookie.length> 0）{//最初にCookieが空であるかどうかを確認してください。
c_start = document.cookie.indexof（c_name + "="）//このcookieが文字列オブジェクトのindexof（）を介して存在するかどうかを確認します。存在しない場合、-1です
if（c_start！= -1）{
c_start = c_start +c_name.length +1 //最後の+1は実際には「=」数を意味するため、Cookie値の開始位置が取得されます
c_end = document.cookie.indexof（ ";"、c_start）//実際には、indexof（）の2番目のパラメーターを見たとき、私は突然少しめまいになりました。後で、指定された開始インデックス位置を示していることを思い出しました...この文は値の終了位置を取得することです。それが最後の項目であるかどうかを考慮する必要があるため、「;」かどうかによって判断されます。数が存在します。
if（c_end == -1）c_end = document.cookie.length
unescape（document.cookie.substring（c_start、c_end））//値は、substring（）を介して取得されます。 unescape（）を理解したい場合は、最初にestase（）が何をするかを知る必要があります。それらはすべて非常に重要な基本です。知りたい場合は、検索できます。 Cookieエンコードの詳細については、記事の最後にも説明されます。
}
}
戻る ""
}
もちろん、配列、規則性などのCookieを実装する方法はたくさんありますので、ここでは詳細に説明しません。
3. Cookieの有効期間を設定します
記事によく表示されるCookieのライフサイクルは、有効期間と有効期限、つまりCookieが存在する時間です。デフォルトでは、ブラウザが閉じられているときにCookieが自動的にクリアされますが、Cookieの有効期間を期限切れに設定できます。構文は次のとおりです。
コードコピーは次のとおりです。
document.cookie = "name = value; expires = date";
上記のコードの日付値は、GMT（Greenwich Time）形式の日付型文字列であり、生成方法は次のとおりです。
コードコピーは次のとおりです。
var _date = new date（）;
_date.setdate（_date.getDate（）+30）;
_date.togmtstring（）;
上記の3行のコードはいくつかのステップに分類されています。
現在の時刻を取得するために、新規から日付のインスタンスを生成します。
getDate（）メソッドは現在の現地月に1日を取得し、30を追加します。つまり、このCookieが30日間ローカルに保存できることを願っています。
次に、SetDate（）メソッドを介して時間を設定します。
最後に、togmtstring（）メソッドを使用して日付オブジェクトを文字列に変換し、結果を返します
次の完全な関数は、Cookieを作成するときに注意する必要があるポイントを示しています。クッキーに情報を保存する関数を作成します。
コードコピーは次のとおりです。
function setcookie（c_name、value、expireds）{
var exdate = new date（）;
exdate.setdate（exdate.getDate（） + expedays）;
document.cookie = c_name + "=" + escape（value） +（（expedays == null）？ ""： "; expires =" + exdate.togmtstring（））;
}
//使用方法：setCookie（ 'username'、 'darren'、30）
これで、私たちの関数は、日数に応じてクッキーの有効な時間を設定します。他のユニット（時間など）に設定する場合は、コードの3行目を変更します。
コードコピーは次のとおりです。
exdate.sethours（exdate.gethours（） + expedays）;
このようにして、Cookieの有効期間は時間に基づいています。
FAQにCookieをクリアする方法は2つあります。ここで、Cookieは有効期間を期限切れに設定することにより無効になっていると言いたいと思います。有効期限を設定する方法があるので、興味のある友達に自分でそれをするように依頼してください^_^。以下のより深いCookieトピックを続けましょう。
Cookie Advanced
One.cookieパスの概念
基本では、ドメインとパスを持つCookieの概念について言及されています。それでは、クッキーのパスの役割を紹介しましょう。
ユーザーがページにアクセスするため、クッキーは通常作成されますが、このCookieはCookieが作成されているページでのみアクセスできません。
デフォルトでは、Cookieを作成したページと同じディレクトリまたはサブディレクトリ内のWebページのみにアクセスできます。これはセキュリティ上の考慮事項によるものであり、すべてのページが他のページで作成されたCookieに自由に作成されることができるわけではありません。例えば：
ページでクッキーを作成します "//www.vevb.com/darren_code/"、次にパスの下のページ "/darren_code/"など： "//www.vevb.com/darren_code/2011/11/07/cookie.html"はデフォルトでクッキー情報を取得できます。
デフォルトでは、「//www.vevb.com」または「//www.vevb.com/xxxx/」はこのCookieにアクセスできません（それを見て、真実を練習することは役に立たない^_^）。
したがって、このCookieを他のディレクトリや親ディレクトリにアクセスできるようにする方法は、Cookieのパスを設定することで達成できます。例は次のとおりです。
コードコピーは次のとおりです。
document.cookie = "name = value; path = path"
document.cookie = "name = value; expires = date; path = path"
赤いフォントパスは、クッキーのパスです。最も一般的な例は、どのサブページが作成されても、すべてのページにアクセスできるように、Cookieをディレクトリ内に置くことです。
コードコピーは次のとおりです。
document.cookie = "name = darren; path =/";
Two.Cookieドメインコンセプト
パスは、同じドメインの下でCookieにアクセスする問題を解決できます。同じドメイン間でCookieにアクセスする問題について説明し続けましょう。構文は次のとおりです。
コードコピーは次のとおりです。
document.cookie = "name = value; path = path; domain = domain";
赤いドメインは、Cookieフィールドセットの値です。
たとえば、「www.qq.com」と「sports.qq.com」は、関連するドメイン名「QQ.com」を共有します。 「sports.qq.com」の下にCookieを「www.qq.com」でアクセスする必要がある場合は、Cookieのドメイン属性を使用して、パス属性を「/」に設定する必要があります。例：
コードコピーは次のとおりです。
document.cookie = "username = darren; path =/; domain = qq.com";
注：同じドメイン間のアクセスは間違いなく、ドメイン値を主要なドメインではないドメイン名に設定することはできません。
Three.Cookieセキュリティ
通常、Cookie情報は、HTTP接続を使用してデータを渡すために使用されます。この配信方法は簡単に表示できるため、Cookieに保存されている情報は簡単に盗まれます。 Cookieで配信されるコンテンツがより重要な場合、暗号化されたデータ送信が必要です。
したがって、Cookieのこの属性の名前は「セキュア」であり、デフォルト値は空です。 Cookieの属性が安全である場合、HTTPSまたは他のセキュリティプロトコルを介してそれとサーバーの間にデータが送信されます。構文は次のとおりです。
コードコピーは次のとおりです。
document.cookie = "username = darren; secure"
Cookieを設定してセキュリティを設定すると、Cookieとサーバーの間のデータ送信プロセスが暗号化されますが、ローカルに保存されているCookieファイルは暗号化されていません。ローカルクッキーを暗号化する場合は、自分でデータを暗号化する必要があります。
注：安全な属性が設定されていても、他の人がマシンに局所的に保存されているCookie情報を見ることができないという意味ではないので、結局のところ、Cookieに重要な情報を入れないでください。
Four.Cookieエンコードの詳細
私はもともと、FAQセクションでCookieエンコードの知識を紹介したかったのです。なぜなら、これを理解していない場合、エンコードの問題は実際に落とし穴であるからです。
Cookie情報を入力する場合、スペース、セミコロン、コンマなどの特別なシンボルを含めることはできません。一般に、Cookie情報の保存はエンコードされていない方法であります。したがって、Cookie情報を設定する前に、最初にEscaip（）関数を使用してCookie値情報をエンコードする必要があり、Cookie値を取得したら、Unescape（）関数を使用して値を変換します。 Cookieを設定する場合：
コードコピーは次のとおりです。
document.cookie = name + "=" + escase（value）;
基本的な使用法で言及されているgetcookie（）の文を見てみましょう。
コードコピーは次のとおりです。
unescape（document.cookie.substring（c_start、c_end））を返します。
このようにして、特別なシンボルがCookie値に表示されるため、Cookie情報エラーについて心配する必要はありません。
個人コード
コードコピーは次のとおりです。
/*Cookieを設定*/
function setcookie（c_name、value、expedays、path、domain、secure）{
var exdate = new date（）; //現在の時間を取得します
exdate.setdate（exdate.getDate（） + expireds）; //有効期限
document.cookie = c_name + "=" + // cookie name
Escape（value） + // Cookie値のエンコード
（（expedays == null）？ ""： "; expires =" + exdate.togmtstring（）） + //有効期間を設定します
（（path == null）？ '/'： '; path =' + path） + //アクセスパスを設定します
（（domain == null）？ ''： '; domain =' + domain） + //アクセスドメインを設定します
（（secure == null）？ ''： '; secure =' + secure）; //暗号化するかどうかを設定します
};
setCookie（ 'test'、 'name = sheng; sex = men; lancer = luldbear'、30）;
setCookie（ 'bb'、 'name = sheng; sex = men'、30）;
/*クッキーを取得*/
function getCookie（c_name、index）{
var cookies = document.cookie; //クッキー値を取得します
var cookielen = cookies.length; //クッキーの長さを取得します
if（cookielen> 0）{//クッキーが空でないとき
var c_start = cookies.indexof（c_name + '='）; //クッキーのクッキー値に必要なシリアル番号を見つける
if（c_start> -1）{//クッキー値が存在するとき
c_start + = c_name.length + 1; // cookie値の開始シーケンス番号を取得します
var c_end = cookies.indexof（ ';'、c_start）; // cookie値のエンドシーケンス番号を取得します
if（c_end == -1）{//クッキーが最後のものであるとき
c_end = cookielen; //クッキー値のエンドシーケンス番号をクッキーの長さに設定します
};
var cosiestr = unescape（cookies.substring（c_start、c_end））; //デコードされたCookie値を取得します
var cookieobj = cookiestr.split（ ';'）; //クッキー値を分割します
index =（（index == null）？0：index）; //インデックスが値に渡されるかどうかを判断します
var goalobj = cookieobj [index]; //インデックス配列
var goalstr = goalobj.split（ '='）;
var getCook = goalstr [1]; //取得する必要があるCookie値を取得します
GetCookを返します。
};
} それ以外 {
console.log（ 'ページにはCookieがありません'）;
}
};
アラート（getCookie（ 'test'、0））; //クエリクッキー値を印刷します