JavaScript は Cookie の書き込み、読み取り、削除機能を実装します_JavaScript スキル

本文を紹介する前に、まずはCookieの基礎知識をご紹介します

まず Cookie とは何なのかを理解してください

「Cookie は訪問者のコンピュータに保存される変数です。この Cookie は、同じコンピュータがブラウザを通じてページをリクエストするたびに送信されます。JavaScript を使用して Cookie の値を作成および取得できます。」

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 の書き込みや削除など、Cookie に対する JavaScript の簡単な操作についていくつかの段落を説明します。

コードは非常にシンプルなので、Cookie の基本的な操作に慣れていない友人が参照するのに適しています。

1. Cookie を書き込みます:

//两个参数，一个是cookie的名子，一个是值
function SetCookie(name,value){
 var Days = 30;//此 cookie 将被保存 30 天
 var exp = new Date();//new Date("December 31, 9998");
 exp.setTime(exp.getTime() + Days*24*60*60*1000);
 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

2. Cookie を読み取ります:

//取cookies函数  
function getCookie(name){
 var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
 if (arr != null) return unescape(arr[2]); return null;
}

3. Cookie を削除します:

//删除cookie
function delCookie(name){
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval = getCookie(name);
 if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}