JSにおけるCookieの使い方とデメリットを紹介

Cookieはそのような仕組みです。これにより、HTTP プロトコルのステートレスな欠点を補うことができます。 Session が登場する前は、基本的にすべての Web サイトはセッションを追跡するために Cookie を使用していました。この記事では、JS における Cookie の使い方と欠点について紹介しますので、困っている友達は参考にしてください

Cookie とは

Cookie とは、W3C 組織によって提案され、最初に開発された「甘いクッキー」を意味します。 Netscape コミュニティによって開発されたメカニズム。現在、Cookie は標準となっており、IE、Netscape、Firefox、Opera などの主流ブラウザはすべて Cookie をサポートしています。

HTTP はステートレス プロトコルであるため、サーバーはネットワーク接続だけからクライアントの ID を知る方法がありません。どうやってするの？顧客にパスを発行するだけです。誰が訪問しても、自分のパスを持参する必要があります。このようにして、サーバーはパスからクライアントの ID を確認できます。これがクッキーの仕組みです。

Cookie は実際には短いテキスト情報です。クライアントはサーバーに要求し、サーバーがユーザーのステータスを記録する必要がある場合、応答を使用してクライアントのブラウザーに Cookie を発行します。クライアントのブラウザは Cookie を保存します。ブラウザが Web サイトを再度リクエストすると、ブラウザはリクエストされた URL を Cookie とともにサーバーに送信します。サーバーはこの Cookie をチェックしてユーザーのステータスを識別します。サーバーは必要に応じて Cookie の内容を変更することもできます。

Cookie の仕組み

プログラムでは、セッションの追跡が非常に重要です。理論的には、あるユーザーのすべてのリクエスト操作は同じセッションに属し、別のユーザーのすべてのリクエスト操作は別のセッションに属する必要があり、この 2 つを混同することはできません。たとえば、ユーザー A がスーパーマーケットで購入した商品は、ユーザー A がいつ購入したとしても、同じセッションに属しており、ユーザー B やユーザー C のショッピング カートに入れることはできません。同じセッションに属していません。

Web アプリケーションは HTTP プロトコルを使用してデータを送信します。 HTTP プロトコルはステートレス プロトコルです。データ交換が完了すると、クライアントとサーバー間の接続が切断され、再度データを交換するには新しい接続を確立する必要があります。これは、サーバーが接続からセッションを追跡できないことを意味します。つまり、ユーザー A がアイテムを購入し、それをショッピング カートに入れます。そのアイテムが再度購入されると、サーバーはその購入がユーザー A のセッションに属するかユーザー B のセッションに属するかを判断できません。このセッションを追跡するには、メカニズムを導入する必要があります。

Cookieはそのような仕組みです。これにより、HTTP プロトコルのステートレスな欠点を補うことができます。 Session が登場する前は、基本的にすべての Web サイトはセッションを追跡するために Cookie を使用していました。

JS 設定 Cookie:

ページ A で、 変数 username ("jack") の値を Cookie に保存し、キー値が name であると仮定すると、対応する JS コードは次のようになります。

 document.cookie="name="+username;

Cookieでは、名前や値にセミコロン(;)、カンマ(,)、等号(=)、スペースを使用できません。これを Cookie の名前で行うのは簡単ですが、保存される値は未定義です。これらの値を保存するにはどうすればよいでしょうか?その方法は、エンコードにescape()関数を使用することです。たとえば、スペースは「20%」としてエンコードされ、Cookieの値に格納されます。また、中国語の文字化けの発生も回避できます。

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

escape() エンコードを使用する場合、元の Cookie 値を取得するために値を取り出した後、unescape() を使用してデコードする必要があります。

JS 読み取り Cookie: Cookie は:

ページ B の変数 username の値を取得する JS コードは次のとおりです:

var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

name=jack;password=123

Cookie の読み取り

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
删除cookies
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();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","hayden","s20");

Cookie の欠点

Cookie は永続化に便利ですが、クライアント データ 。サーバー ストレージの負担を共有しますが、依然として多くの制限があります。 最初: 特定のドメイン名ごとに最大 20 個の Cookie が生成されます

1。IE6 以前のバージョンでは最大 20 個の Cookie を保持できます

2。IE7 以降のバージョンでは、最終的に 50 個の Cookie を保持できます。

3.Firefox には最大 50 個の Cookie があります

4.Chrome と Safari には厳しい制限はありません

IE と Opera は最も最近使用されていない Cookie を削除し、Firefox はランダムに Cookie を削除します。

互換性のため、Cookie の最大サイズは約 4096 バイトです。通常は 4095 バイトを超えることはできません。

IE は、IE5.0 からサポートされている uerData と呼ばれる、ユーザー データを永続化できるストレージを提供します。各データは最大 128K、各ドメイン名は最大 1M まで可能です。この永続データは

キャッシュ

に配置され、キャッシュがクリアされない場合、常に存在します。

利点: 非常に高い拡張性と使いやすさ

1. 適切なプログラミングを通じて、Cookie に保存されるセッション オブジェクトのサイズを制御します。 2. 暗号化と安全な送信技術 (SSL) によって Cookie が解読される可能性を減らします。

3. Cookie には機密性のないデータのみが保存されるため、たとえ盗まれたとしても重大な損失は発生しません。

4. Cookie が永久に有効にならないように、Cookie の有効期間を制御します。泥棒が期限切れの Cookie を入手した可能性があります。

欠点:

1.「Cookie」の数と長さの制限。各ドメインには最大 20 個の Cookie のみを含めることができ、各 Cookie の長さは 4KB を超えることはできません。4KB を超えると切り捨てられます。

2. セキュリティの問題。 Cookie が誰かに傍受された場合、その人はすべてのセッション情報を取得できます。暗号化も役に立ちません。傍受者は Cookie の意味を知る必要がないため、Cookie をそのまま転送するだけで目的を達成できます。

3. 一部の状態はクライアントに保存できません。たとえば、フォームの重複送信を防ぐには、サーバー側にカウンターを保存する必要があります。このカウンタをクライアント側に保存しても、効果はありません。

【関連推奨事項】

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1バージョンのダウンロード

2.

3

php.cn Dugu Jiijian (3) - JavaScript ビデオ チュートリアル

以上がJSにおけるCookieの使い方とデメリットを紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。