JavaScriptのCookieの設定と削除について詳しく解説_javascriptスキル-jsチュートリアル-php.cn

Cookie を設定する 各 Cookie は、次の文字列を document.cookie に割り当てることができます。 複数の名前と値のペアを一度に保存したい場合は、セミコロンとスペース (;) を使用してそれらを区切ることができます。例: document.cookie="userId=828; userName=hulk"; セミコロン (;)、カンマ (,)、等号 (=)、およびスペースは、Cookie の名前または値に使用できません。これを Cookie の名前で行うのは簡単ですが、保存される値は未定義です。これらの値を保存するにはどうすればよいでしょうか? その方法は、いくつかの特殊な記号の 16 進表現を使用できる、escape() 関数を使用することです。たとえば、スペースは「20%」としてエンコードされ、Cookie 値に保存されます。 , この解決策を使用すると、中国語の文字化けの発生も回避できます。例: document.cookie="str="scape("I love ajax"); は次と同等です: document.cookie="str=I love ajax"; > escape() エンコードを使用する場合、値を取り出して元の Cookie 値を取得した後、unescape() を使用してデコードする必要があります。これは以前に紹介しました。 document.cookie はプロパティのように見えますが、異なる値を割り当てることができます。ただし、一般的な属性とは異なります。たとえば、次の 2 つのステートメントを連続して実行しても、元の値が失われるわけではありません。 cookie="userName=hulk"; 現時点では、ブラウザーは userId と userName という 2 つの Cookie を保持するため、document.cookie に値を割り当てることは、次のようなステートメントを実行することに似ています。 document.addcookie("userId=828"); document.addcookie("userName=hulk"); 実際、ブラウザはこのように Cookie を設定します。 Cookie の値のみを再割り当てする必要があります。例: document.cookie="userId=929"; これにより、userId という名前の Cookie 値が 929 に設定されます。 Cookie の値を取得する Cookie の値を取得する方法を説明します。 Cookie の値は document.cookie から直接取得できます: var strcookie=document.cookie; これは、セミコロンで区切られた複数の名前と値のペアで構成される文字列を取得します。値ペアには、このドメイン名の下にあるすべての Cookie が含まれます。例: document.cookie="userId=828"; = "userName=hulk"; alert(strcookie); ;出力された Cookie の値を示します。すべての Cookie 値を一度に取得することしかできないことがわかりますが、指定した値を取得するために Cookie 名を指定することはできません。これが Cookie 値の処理で最も面倒な部分です。ユーザーはこの文字列を自分で分析して、指定された Cookie 値を取得する必要があります。たとえば、userId の値を取得するには、次のようにします。 > //2 つの Cookie を設定します document.cookie="userId=828"; document.cookie="userName=hulk"; //Cookie 文字列を取得します var strcookie=document.cookie; //複数の Cookie を複数の名前と値のペアに分割します var arrcookie=strcookie.split("; "); Cookie 配列を取得し、各 Cookie ペアを処理します。 for(var i=0;i var arr=arrcookie[i].split("="); // userId という名前の Cookie を検索し、その値を返します。 if("userId"==arr[0]){ userId=arr[1] } } alert(userId); //--> 次のようなメソッドを使用します。 1 つ以上の Cookie の値を取得できますが、その主なスキルは依然として文字列と配列の関連操作です。 Cookie の有効期限を設定する これまでのところ、すべての Cookie はシングルセッション Cookie です。つまり、これらの Cookie はブラウザを閉じると失われます。実際、これらの Cookie は、対応するハードディスク ファイルを作成せずにメモリに保存されるだけです。 実際の開発では、ユーザーのログイン状態の保存など、Cookieを長期間保存する必要があることがよくあります。これは、次のオプションを使用して実現できます: document.cookie="userId=828;expires=GMT_String"; GMT_String は GMT 形式の時刻文字列であり、このステートメントはuserId Cookie を GMT_String で表される有効期限に設定します。この時間が経過すると、Cookie は消えてアクセスできなくなります。例: Cookie の有効期限が 10 日後に切れるように設定したい場合は、次のように設定できます: コードをコピー コードは次のとおりです: // 現在時刻を取得します var date=new Date(); varexpiredDays=10; //日付を 10 日後に設定します date.setTime()expiredDays*24*3600*1000); 🎜>//userId と userName を設定します。どちらの Cookie も 10 日後に期限切れになるように設定されています。 document.cookie="userId=828; userName=hulk;expired=" date.toGMTString(); ; Cookie の削除 Cookie を削除するには、有効期限を過去の時刻に設定できます。たとえば、 コードをコピーします コードは次のとおりです。 > //現在の時刻を取得します var date=new Date(); //日付を過去の時刻に設定します date.setTime(date.getTime()- 10000); //userId Cookie を削除します document.cookie="userId=828; date.toGMTString(); //->> Cookie にアクセスできるパスを指定します デフォルトでは、あるページで Cookie が作成された場合、そのページが保存されているディレクトリ内の他のページ見つかった Cookie にもアクセスできます。このディレクトリの下にサブディレクトリがある場合は、そのサブディレクトリからもアクセスできます。たとえば、www.xxxx.com/html/a.html で作成された Cookie には、www.xxxx.com/html/b.html または www.xxx.com/html/some/c.html からアクセスできますが、アクセスすることはできません。 www.xxxx.com/d.html からアクセスしてください。 Cookie がアクセスできるディレクトリを制御するには、path パラメーターを使用して Cookie を設定する必要があります。構文は次のとおりです: document.cookie="name=value; path=cookieDir" ; ここで、cookieDir はアクセス可能な Cookie のディレクトリを意味します。例: document.cookie="userId=320; path=/shop"; は、現在の Cookie がショップ ディレクトリでのみ使用できることを意味します。 Web サイト全体で Cookie を使用できるようにする場合は、ルート ディレクトリとして cookie_dir を指定できます (例: document.cookie="userId=320; path="/"; Cookie にアクセスできるホスト名を指定します パスと同様に、ホスト名は同じドメイン内の異なるホストを参照します。例: www.google .com と gmail.google.com 2 つの異なるホスト名だけです。デフォルトでは、あるホストで作成された Cookie に別のホストでアクセスすることはできませんが、構文形式は次のとおりです: document.cookie="name =value; domain=cookieDomain"; Google を例に挙げると、クロスホスト アクセスを実現するには、次のように記述します。 document.cookie="name=value;domain=.google.com "; 🎜>この方法では、google.com 下のすべてのホストが Cookie にアクセスできます。 包括的な例: ユニバーサル Cookie 処理関数の構築 Cookie 処理プロセスは比較的複雑であり、いくつかの類似点があります。したがって、一般的な Cookie 操作を完了するためにいくつかの関数を定義でき、それによってコードの再利用が実現します。一般的に使用される Cookie 操作とその関数の実装を以下に示します。 1. Cookie を追加します: addcookie(name, value,expireHours) この関数は、Cookie 名、Cookie 値、有効期限の 3 つのパラメーターを受け取ります。ここでは、expireHours が 0 の場合、有効期限は設定されない、つまりブラウザを閉じると Cookie が自動的に消えることが合意されています。この関数は次のように実装されます。 コードをコピー コードは次のとおりです。 function addcookie(name,value,expireHours){ var cookieString=name "="scape(value) ; / / 有効期限を設定するかどうかを決定します if(expireHours>0){ var date=new Date(); date.setTime(date.getTimeexpireHours*3600*1000) ; cookieString=cookieString "; 期限切れ = date.toGMTString(); document.cookie=cookieString; //--> 2. 指定された名前の Cookie 値を取得します: getcookie(name) この関数は、name という名前の Cookie 値を返します。それが存在しない場合は、空を返します。その実装は次のとおりです。 コードをコピーします コードは次のとおりです。 関数 getcookie(name){ var strcookie=document.cookie; var arrcookie=strcookie; split("; "); for(var i=0 ;i var arr=arrcookie[i].split("="); [0]==name)return arr[1]; return "" >} 3. 指定された名前の Cookie を削除します: deletecookie(name) この関数の実装は次のとおりです: コードをコピー コードは次のとおりです: function getcookie(name){ var strcookie=document.cookie; var arrcookie=strcookie.split("; "); for(var i=0;i var arr=arrcookie[i].split("= ); if(arr[0]==name)return } return "" ; /script> インターネット上で配布されている別のスクリプトも使用できます: コードをコピー コードは次のとおりです: function SetCookie(name,value)//2 つのパラメータ、1 つは cookie 名、1 つは value { var Days = 30 です。 var exp = new Date(); //new Date("9998 年 12 月 31 日) ") ; exp.setTime(exp.getTime() Days*24*60*60*1000); document.cookie = name "=" エスケープ (値) ";expires=" exp.toGMTString( ); } function getCookie(name)//Cookie を取得 function { var arr = document.cookie.match(new RegExp("(^| )" name "=([^ ;] *)(;|$)")); if(arr != null) return unescape(arr[2]); return null; } function delCookie(name) // クッキーを削除します { var exp = new Date() exp.setTime(exp.getTime() - 1); var cval=getCookie(name); (cval !=null) document.cookie= name "=" cval ";expires=" exp.toGMTString(); } SetCookie ("xiaoqi", "3") アラート(getCookie ('xiaoqi'));