Cookieを操作するJavaScriptを詳しく解説_基礎知識

クッキーとは

「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 の形式は次のとおりです: =; 名前と値は両方とも有効な識別子である必要があります。

Cookieには有効期限があります。デフォルトでは、Cookie のライフサイクルはブラウザを閉じると終了します。ブラウザを閉じた後も Cookie を使用できるようにするには、Cookie の有効期間、つまり Cookie の有効期限を設定する必要があります。

alert(typeof document.cookie) 結果は文字列です。配列だと思って冗談を言ったこともあります...囧

Cookie にはドメインとパスの概念があります。ドメインはドメインの概念です。ブラウザはセキュリティを重視した環境であるため、異なるドメインが相互に Cookie にアクセスすることはできません (もちろん、特別な設定を使用すれば、Cookie へのクロスドメイン アクセスを実現できます)。パスはルーティングの概念です。Web ページによって作成された Cookie は、この Web ページと同じディレクトリまたはサブディレクトリにあるすべての Web ページからのみアクセスできますが、他のディレクトリにある Web ページからはアクセスできません (この文は少しわかりにくいので、後で見ていきます)。後で説明します）例を使うと理解しやすいです）。

実際、Cookie を作成する方法は、変数を定義する方法と似ています。どちらも、Cookie 名と Cookie 値を使用する必要があります。同じ Web サイトで複数の Cookie を作成でき、複数の Cookie を同じ Cookie ファイルに保存できます。

クッキーに関するよくある質問

クッキーには 2 種類あります:

現在閲覧している Web サイトによって設定された Cookie

Web ページ上の埋め込み広告や画像など、他のドメイン ソースからのサードパーティ Cookie (Web サイトはこれらの Cookie を使用して使用状況情報を追跡できます)

基礎知識では Cookie のライフサイクルの問題について触れましたが、実際には Cookie は大きく 2 つの状態に分けられます。

一時的なクッキー。このウェブサイトは、現在の使用中にお客様の個人情報の一部を保存し、ブラウザを閉じるとこの情報もお客様のコンピュータから削除されます

Cookie に有効期限を設定します。ブラウザを閉じても、この情報はコンピュータ上に残ります。ログイン名とパスワードなど。特定のサイトにアクセスするたびにログインする必要はありません。この Cookie は、数日間、数か月、さらには数年間もコンピュータ上に残る可能性があります

Cookie をクリアするには 2 つの方法があります:

ブラウザツールを使用して Cookie をクリアします (サードパーティのツールがあり、ブラウザ自体にもこの機能があります)

有効期限を設定して Cookie をクリアします

注: Cookie を削除すると、一部の Web ページが正しく機能しなくなる場合があります

ブラウザは、Cookie へのアクセスを許可または拒否するように設定できます。

機能とパフォーマンスの理由から、使用する Cookie の数を減らし、できるだけ小さな Cookie を使用することをお勧めします。

Cookie エンコードの詳細は、高度な Cookie の章で別途紹介されます。

ローカル ディスク上のページの場合、Chrome コンソールは JavaScript を使用して Cookie を読み書きすることができません。解決策はブラウザを変更します^_^。

Cookieの基本的な使い方

1. 簡単なアクセス操作

JavaScript を使用して Cookie にアクセスする場合は、Document オブジェクトの cookie 属性を使用する必要があります。コード行には、Cookie の作成および変更方法が記述されています。

コードをコピー コードは次のとおりです:

document.cookie = 'ユーザー名=ダレン';


上記のコードでは、「username」は Cookie 名を表し、「Darren」はこの名前に対応する値を表します。 Cookie 名が存在しない場合は新しい Cookie が作成され、存在する場合は Cookie 名に対応する値が変更されます。 Cookie を複数回作成したい場合は、この方法を繰り返し使用してください。

2. Cookie 読み取り操作

Cookie を正確に読み取るのは実際には非常に簡単で、文字列を操作するだけです。分析のために w3school からこのコードをコピーします:

コードをコピーします コードは次のとおりです:

関数 getCookie(c_name){
if (document.cookie.length>0){ //まずCookieが空かどうかを確認し、空の場合は""
を返す c_start=document.cookie.indexOf(c_name "=") //このCookieが存在するかどうかをStringオブジェクトのindexOf()で確認し、存在しない場合は-1
となります。 if (c_start!=-1){
c_start=c_start c_name.length 1 //最後の1は実際には「=」の数値を表しており、クッキー値の開始位置を取得します
c_end=document.cookie.indexOf(";",c_start) //実は、indexOf() の 2 番目のパラメータを最初に見たとき、少しめまいがしました。後で、これが指定されたインデックスの開始位置を意味していることを思い出しました。文は値の終了位置を取得するためのものです。最後の項目かどうかを考慮する必要があるため、「;」記号の有無で判断できます
if (c_end==-1) c_end=document.cookie.length
Return unescape(document.cookie.substring(c_start,c_end)) //値は substring() を通じて取得されます。 unescape() を理解するには、まず、escape() が何をするのかを知る必要があります。さらに詳しく知りたい場合は、最後に Cookie エンコーディングの詳細についても説明します。記事
}
}
""を返します
}

もちろん、配列、正規表現など、Cookie を読み取る方法はたくさんあるので、ここでは詳しく説明しません。

3. Cookie の有効期間を設定します

記事でよく登場するCookieのライフサイクルは、Cookieの有効期間と有効期限、つまり存在時間です。デフォルトでは、Cookie はブラウザを閉じると自動的にクリアされますが、有効期限までに Cookie の有効期間を設定できます。構文は次のとおりです:

コードをコピーします コードは次のとおりです:

document.cookie = "名前=値;有効期限=日付";

上記のコードの日付値は GMT (グリニッジ標準時) 形式の日付文字列であり、次のように生成されます:

コードをコピー コードは次のとおりです:

var _date = 新しい日付();
_date.setDate(_date.getDate() 30);
_date.toGMTString();

上記の 3 行のコードは、いくつかのステップに分かれています:

new を使用して Date インスタンスを生成し、現在の時刻を取得します。

getDate() メソッドは、現在のローカル月の特定の日を取得し、30 を加算します。この Cookie を 30 日間ローカルに保存できることを願っています。

次に、setDate() メソッドを使用して時刻を設定します。

最後に、toGMTString() メソッドを使用して Date オブジェクトを文字列に変換し、結果を返します

次の完全な関数を使用して、Cookie の作成プロセスで注意を払う必要があるものを示します (w3school からコピー)。情報を Cookie に保存する関数を作成します:

コードをコピー コードは次のとおりです:

function setCookie(c_name, value,expireddays){
var exdate=new Date();
exdate.setDate(exdate.getDate() 有効期限);
Document.cookie=c_name "=エスケープ(値) ((expiredays==null) ? "" : ";expires=" exdate.toGMTString());
}
//使用法: setCookie('username','Darren',30)

関数は日数に応じて Cookie の有効期間を設定します。他の単位 (時間など) で設定したい場合は、コードの 3 行目を変更します。

コードをコピー コードは次のとおりです:

exdate.setHours(exdate.getHours() 有効期限);

このように設定すると、Cookie の有効期間は時間に基づいて設定されます。

FAQ に記載されている Cookie をクリアするには 2 つの方法があります。これから説明するのは、有効期限を期限切れに設定して Cookie を無効にする方法です。有効期限を設定する方法があるので、興味のある友達は自分で設定してください^_^。 Cookie についてさらに詳しく説明しましょう。

Cookie 上級章

1. Cookie パスの概念

基礎知識でCookieにはドメインとパスの概念があると述べましたが、ここでCookieにおけるパスの役割を紹介します。

Cookie は通常、ユーザーがページにアクセスしたときに作成されますが、この Cookie にアクセスできるのは、Cookie が作成されたページだけではありません。

デフォルトでは、Cookie を作成したページと同じディレクトリまたはサブディレクトリにある Web ページのみにアクセスできます。これはセキュリティ上の考慮事項によるもので、すべてのページが他のページによって作成された Cookie に自由にアクセスできるわけではありません。例:

ページ「http://www.jb51.net/Darren_code/」に Cookie を作成すると、パス「/Darren_code/」の下のページは次のようになります。「http://www.jb51.net/」 Darren_code /archive/2011/11/07/Cookie.html" このページはデフォルトで Cookie 情報を取得できます。

デフォルトでは、「http://www.jb51.net」または「http://www.jb51.net/xxxx/」はこの Cookie にアクセスできません (ただ見るだけでは役に立たず、練習すれば真実がわかります) ^_^)。

したがって、この Cookie を他のディレクトリまたは親ディレクトリにアクセスできるようにするには、Cookie のパスを設定することで実現できます。例は次のとおりです。

コードをコピー コードは次のとおりです:

document.cookie = "名前=値;パス=パス"
document.cookie = "名前=値;有効期限=日付;パス=パス"

赤いフォントのパスは Cookie のパスです。最も一般的な例は、Cookie を作成するサブページに関係なく、すべてのページがそれにアクセスできるように Cookie をディレクトリに置くことです。

コードをコピーします コードは次のとおりです:

document.cookie = "名前=ダレン;パス=/";

2. Cookie ドメインの概念

Path は、同じドメイン内の Cookie へのアクセスの問題を解決できます。次に、同じドメイン間のアクセスを実現する Cookie の問題について説明します。構文は次のとおりです:

コードをコピーします コードは次のとおりです:

document.cookie = "名前=値;パス=パス;ドメイン=ドメイン";

赤いドメインは、Cookie ドメイン セットの値です。
たとえば、「www.qq.com」と「sports.qq.com」は、関連付けられたドメイン名「qq.com」を共有します。「sports.qq.com」の下の Cookie を「www.qq.com」にします。 qq.com」にアクセスするには、Cookie のドメイン属性を使用し、パス属性を「/」に設定する必要があります。例:

コードをコピー コードは次のとおりです:

document.cookie = "ユーザー名=Darren;パス=/;ドメイン=qq.com";

注: 同一ドメイン間のアクセスである必要があります。ドメイン値にはプライマリ ドメイン以外のドメイン名を設定できません。

3. Cookie のセキュリティ

通常、Cookie 情報は HTTP 接続を使用してデータを転送します。この転送方法は簡単に閲覧できるため、Cookie に保存された情報は簡単に盗まれます。 Cookie で渡されるコンテンツが重要な場合は、暗号化されたデータ送信が必要です。

つまり、Cookie のこの属性の名前は「secure」で、デフォルト値は空です。 Cookie の属性が安全である場合、データは HTTPS またはその他の安全なプロトコルを介してサーバーとの間で転送されます。構文は次のとおりです:

コードをコピーします コードは次のとおりです:

document.cookie = "ユーザー名=Darren;secure"


Cookie をセキュリティで保護するように設定すると、Cookie とサーバー間のデータ送信プロセスが暗号化されるだけであり、ローカルに保存されている Cookie ファイルは暗号化されません。ローカル Cookie を暗号化したい場合は、データを自分で暗号化する必要があります。

注: secure 属性が設定されている場合でも、あなたのマシンにローカルに保存されている Cookie 情報を他の人が見ることができないわけではないので、最終的には Cookie に重要な情報を入れないでください。

4. Cookie エンコードの詳細

元々、Cookie エンコードに関する知識を FAQ セクションで紹介したいと思っていました。これを理解していないと、エンコードの問題はまさに落とし穴になるため、詳しく説明します。

Cookie 情報を入力する場合、スペース、セミコロン、カンマなどの特殊記号を含めることはできません。通常、Cookie 情報はエンコードされずに保存されます。したがって、Cookie 情報を設定する前に、まず、escape() 関数を使用して Cookie 値情報をエンコードし、次に unescape() 関数を使用して、Cookie 値を取得したときに値を変換し直す必要があります。たとえば、Cookie を設定する場合:

コードをコピーします コードは次のとおりです:

document.cookie = 名前 "=" エスケープ (値);

基本的な使用法で説​​明した getCookie() 内の文を見てみましょう:

コードをコピーします コードは次のとおりです:

return unescape(document.cookie.substring(c_start,c_end));

こうすることで、Cookie 値に特殊な記号が含まれるために Cookie 情報が不正確になることを心配する必要がなくなります。

個人コード

コードをコピーします コードは次のとおりです:

/*Cookie を設定*/

関数 setCookie(c_name, 値, 有効期限, パス, ドメイン, セキュア) {
var exdate = new Date() //現在時刻を取得します
exdate.setDate(exdate.getDate()expireddays); //有効期限
document.cookie = c_name "=" //クッキー名
scape(value) //クッキー値をエンコードします
((expiredays == null) ? "" : ";expires=" exdate.toGMTString()) //有効期限を設定します
((path == null) ? '/' : ';path=' path) //アクセスパスを設定します
((domain == null) ? '' : ';domain=' ドメイン) //アクセスドメインを設定します
((secure == null) ? '' : ';secure=' secure //暗号化するかどうかを設定します
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);

/*Cookie を取得*/

関数 getCookie(c_name,index) {
var cookies = document.cookie // Cookie 値を取得します
var cookieLen = cookies.length // クッキーの長さを取得します
if (cookieLen > 0) { //Cookie が空でない場合

var c_start = cookies.indexOf(c_name '='); // Cookie 内の Cookie 値とシリアル番号を検索します
if (c_start > -1) { //Cookie 値が存在する場合
c_start = c_name.length 1 // Cookie 値の開始シーケンス番号を取得します

;

var c_end = cookies.indexOf(';', c_start); //Cookie 値の終了シーケンス番号を取得します
If (c_end == -1) { //クッキーが最後のクッキーの場合
c_end = cookieLen // Cookie 値の終了シーケンス番号を Cookie の長さに設定します
};

var cookieStr = unescape(cookies.substring(c_start, c_end)) //デコードされた Cookie 値を取得します

var cookieObj = cookieStr.split(';') // Cookie 値を分割します

Index = ((index == null) ? 0 : Index) // インデックスに値が渡されるかどうかを判断します

var goalObj = cookieObj[index] //インデックス配列
; varゴールStr =ゴールObj.split('=');
var getcook = goalStr[1] // 必要な Cookie 値を取得します
; getcook を返します;
};
} else {
Console.log('ページには Cookie がありません');
}
};

alert(getCookie('test', 0)) //クエリの Cookie 値を出力します