JavaScript の cookie_javascript スキルについて詳しく説明します

JavaScript のもう 1 つのメカニズムである Cookie は、真のグローバル変数の要件を満たすことができます。 Cookie は、ドキュメント オブジェクトの Cookie 属性を JavaScript に提供するブラウザによって提供されるメカニズムです。これは JavaScript によって制御できますが、JavaScript 自体のプロパティではありません。

Cookie の概要

前のセクションでは、商品表示ページが常に変化する一方で、不変フレームワークを使用してショッピング列データを保存しましたが、これはグローバル変数をシミュレートする機能を実現できますが、厳密ではありません。たとえば、ナビゲーション フレーム ページ内で右クリックし、ショートカット メニューの [更新] コマンドをクリックすると、JavaScript 変数はすべて失われます。したがって、厳密なクロスページ グローバル変数を実装するには、JavaScript の別のメカニズムである Cookie が真のグローバル変数の要件を満たすことができます。

Cookie はブラウザによって提供されるメカニズムで、ドキュメント オブジェクトの Cookie 属性を JavaScript に提供します。これは JavaScript によって制御できますが、JavaScript 自体のプロパティではありません。 Cookie はユーザーのハード ドライブに保存されているファイルで、通常、ブラウザがドメイン名に再度アクセスすると、Cookie が使用可能になります。したがって、Cookie は 1 つのドメイン名の下で複数の Web ページにまたがることができますが、複数のドメイン名にまたがって使用することはできません。

ブラウザごとに Cookie の実装方法は異なりますが、プロパティは同じです。たとえば、Windows 2000 および Windows XP では、cookie ファイルは、documents and settingsuserNamecookie フォルダに保存されます。通常の命名形式は、userName@domain.txt です。

Cookie メカニズムはユーザーのハードドライブに情報を保存するため、グローバル変数として使用できます。これが最大の利点の 1 つです。以下のような場合に使用できます。

(1) ユーザーのログイン状態を保存します。たとえば、ユーザー ID は Cookie に保存されるため、ユーザーは次回そのページにアクセスするときに再度ログインする必要がなくなります。現在、多くのフォーラムやコミュニティがこの機能を提供しています。 Cookie には有効期限を設定することもでき、制限時間が経過すると、Cookie は自動的に消去されます。したがって、システムはユーザーにログイン状態を維持するよう求めることがよくあります。一般的なオプションは 1 か月、3 か月、1 年などです。

(2) ユーザーの行動を追跡します。たとえば、天気予報 Web サイトでは、ユーザーが選択した地域に基づいて地域の気象状況を表示できます。毎回場所を選択するのは面倒ですが、Cookieを使用すると、次回ページを開くときに前回訪れた場所を記憶し、自動的に表示されるのでとても便利です。最後のユーザーの地域の気象状況。すべてがバックグラウンドで実行されるため、このようなページはユーザーと同じようにカスタマイズされ、非常に使いやすくなります。

(3) カスタマイズされたページ。ウェブサイトがスキンの変更やレイアウトの変更機能を提供している場合、背景色や解像度などのユーザーのオプションを記録するために Cookie が使用されることがあります。ユーザーが次回訪問するときも、前回の訪問時のインターフェイス スタイルを保存できます。

(4) ショッピングカートを作成します。前の例と同様に、Cookie はユーザーが購入する必要がある商品を記録するために使用され、チェックアウト時に均一に送信できます。たとえば、淘宝網では Cookie を使用してユーザーが閲覧した商品を記録し、いつでも比較できるようにしています。

もちろん、上記のアプリケーションは Cookie が完了できるアプリケーションの一部にすぎず、グローバル変数を必要とする関数はさらにあります。 Cookie の欠点は主にセキュリティとプライバシー保護にあります。主に次のカテゴリが含まれます:

(1) Cookie が無効になっている可能性があります。ユーザーが個人のプライバシー保護を非常に重視する場合、ブラウザの Cookie 機能を無効にする可能性があります
(2) Cookie はブラウザーに関連しています。これは、同じページにアクセスした場合でも、異なるブラウザで保存された Cookie は相互にアクセスできないことを意味します
(3) Cookieは削除される場合があります。各 Cookie はハードドライブ上のファイルであるため、ユーザーによって削除される可能性があります
(4) Cookie のセキュリティが十分に高くありません。すべての Cookie は平文形式でファイルに記録されるため、ユーザー名やパスワードなどの情報を保存したい場合は、事前に暗号化することをお勧めします。

Cookie を設定

各 Cookie は名前と値のペアです。次の文字列を document.cookie に割り当てることができます。

document.cookie="userId=828";

document.cookie="userId=828; userName=hulk"; 

document.cookie="str="+escape("I love ajax");

document.cookie="str=I%20love%20ajax";

document.cookie="userId=828"; 
document.cookie="userName=hulk";

document.addCookie("userId=828"); 
document.addCookie("userName=hulk");

document.cookie="userId=929"; 

<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取当前时间 
var date=new Date(); 
var expiresDays=10; 
//将date设置为10天以后的时间 
date.setTime(date.getTime()+expiresDays*24*3600*1000); 
//将userId和userName两个cookie设置为10天后过期 
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString(); 
//--> 
</script>

<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取当前时间 
var date=new Date(); 
//将date设置为过去的时间 
date.setTime(date.getTime()-10000); 
//将userId这个cookie删除 
document.cookie="userId=828; expires="+date.toGMTString(); 
//--> 
</script>

document.cookie="userId=320; path=/shop"; 

document.cookie="userId=320; path=/";

document.cookie="name=value;domain=.google.com"; 

<script language="JavaScript" type="text/javascript"> 
<!-- 
function addCookie(name,value,expiresHours){ 
var cookieString=name+"="+escape(value); 
//判断是否设置过期时间 
if(expiresHours>0){ 
var date=new Date(); 
date.setTime(date.getTime+expiresHours*3600*1000); 
cookieString=cookieString+"; expires="+date.toGMTString(); 
} 
document.cookie=cookieString; 
} 
//--> 
</script>

<script language="JavaScript" type="text/javascript"> 
<!-- 
function getCookie(name){ 
var strCookie=document.cookie; 
var arrCookie=strCookie.split("; "); 
for(var i=0;i<arrCookie.length;i++){ 
var arr=arrCookie[i].split("="); 
if(arr[0]==name)return arr[1]; 
} 
return ""; 
} 
//--> 
</script>

<script language="JavaScript" type="text/javascript"> 
<!-- 
function deleteCookie(name){ 
var date=new Date(); 
date.setTime(date.getTime()-10000); 
document.cookie=name+"=v; expires="+date.toGMTString(); 
} 
//--> 
</script>