ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript操作Cookieメソッド関数コレクション
質問:
ページにアクセスするときに最後の設定を保持したり、異なるページ間でデータを共有したりできます。たとえば、ユーザーが Web サイトにアクセスするときにページのフォント サイズを設定した場合、次回 Web サイトにアクセスするときに、再度設定する必要がなく、同じ設定を使用してブラウジングできることを望んでいます。
解決策:
ユーザーがページを閲覧して設定を行った場合、その設定を Cookie に保存し、次回アクセスしたときに Cookie 内の設定を読み取ります。
次のスクリプトを参照してください:
// utility function to retrieve an expiration data in proper format; function getExpDate(days, hours, minutes) { var expDate = new Date(); if(typeof(days) == "number" && typeof(hours) == "number" && typeof(hours) == "number") { expDate.setDate(expDate.getDate() + parseInt(days)); expDate.setHours(expDate.getHours() + parseInt(hours)); expDate.setMinutes(expDate.getMinutes() + parseInt(minutes)); return expDate.toGMTString(); } } //utility function called by getCookie() function getCookieVal(offset) { var endstr = document.cookie.indexOf(";", offset); if(endstr == -1) { endstr = document.cookie.length; } return unescape(document.cookie.substring(offset, endstr)); } // primary function to retrieve cookie by name function getCookie(name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while(i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) { return getCookieVal(j); } i = document.cookie.indexOf(" ", i) + 1; if(i == 0) break; } return; } // store cookie value with optional details as needed function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } // remove the cookie by setting ancient expiration date function deleteCookie(name,path,domain) { if(getCookie(name)) { document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } }
getCookie(name) 関数を使用して、Cookie に保存されている値を読み取ります。パラメーター名は Cookie 項目の名前です。 Cookie 項目が存在しない場合は、空の文字列が返されます。
setCookie() 関数を使用して Cookie 項目の値を保存します。最初と 2 番目のパラメーターはそれぞれ Cookie 項目の名前と値です。有効期限を設定したい場合は、3 番目のパラメータを設定する必要があります。ここでは、getExpDate() を通じて正しい形式でパラメータを取得する必要があります。
最後に、deleteCookie() を使用して既存の Cookie 項目を削除します。これは、基本的に項目を期限切れにすることによって行われます。
Cookie はクライアント側にデータを保存します。ページのスクリプトは、ドメインとサーバーの Cookie 値のみを読み取ることができます。ドメイン内に複数のサーバーがある場合は、5 番目のパラメーターを設定してサーバーを指定する必要があります。ブラウザの容量は通常、サーバーごとに 20 の名前と値のペアに制限されており、各 Cookie 項目は 4,000 文字を超えてはなりません。より現実的には、1 つの Cookie 項目は 2,000 文字未満である必要があります。つまり、大量のデータを保存するために Cookie を使用しないでください。クライアントの容量データ。
ブラウザごとに Cookie の保存方法も異なります。 IE はドメインごとに Cookie のテキスト ファイルを作成しますが、Netscape はすべての Cookie を同じテキスト ファイルに保存します。
注: Cookie はクライアント側に保存されるため、たとえば、ユーザーが Cookie を無効にするなど、ブラウザの設定の影響を受けます。ブラウザが Cookie をサポートしているかどうかを検出するには、navigator.cookieEnabled プロパティを使用します。
<script> //写cookies函数 作者:翟振凯 function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值 { 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(); } function getCookie(name)//取cookies函数 { var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); if(arr != null) return unescape(arr[2]); return null; } function delCookie(name)//删除cookie { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } SetCookie ("xiaoqi", "3") alert(getCookie('xiaoqi')); </script>
Cookie の読み取りと書き込みを行うための非常に実用的な JavaScript 関数
function GetCookieVal(offset) //获得Cookie解码后的值 { var endstr = documents.cookie.indexOf (";", offset); if (endstr == -1) endstr = documents.cookie.length; return unescape(documents.cookie.substring(offset, endstr)); } function SetCookie(name, value) //设定Cookie值 { var expdate = new Date(); var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; if(expires!=null) expdate.setTime(expdate.getTime() + ( expires * 1000 )); documents.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires="+ expdate.toGMTString())) +((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain)) +((secure == true) ? "; secure" : ""); } function DelCookie(name) //删除Cookie { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); documents.cookie = name + "=" + cval + "; expires="+ exp.toGMTString(); } function GetCookie(name) //获得Cookie的原始值 { var arg = name + "="; var alen = arg.length; var clen = documents.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (documents.cookie.substring(i, j) == arg) return GetCookieVal (j); i = documents.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } <SCRIPT language="javascript"> <!-- function openpopup(){ url="popup.htm" window.open("gonggao.htm","gonggao","width=260,height=212,left=200,top=0") } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (documents.cookie.length > 0) { offset = documents.cookie.indexOf(search) if (offset != -1) { offset += search.length end = documents.cookie.indexOf(";", offset); if (end == -1) end = documents.cookie.length; returnvalue=unescape(documents.cookie.substring(offset, end)) } } return returnvalue; } function helpor_net(){ if (get_cookie('popped')==''){ openpopup() documents.cookie="popped=yes" } } helpor_net() //--> </SCRIPT>
OK をクリックすると、Cookie を知らない限り、再度プロンプトが表示されることはありません今後の訪問のために「OK」をクリックしないと、毎回メッセージが表示されます。これを js ファイルに配置すると、サイト全体に
<SCRIPT LANGUAGE="JavaScript"> <!-- var the_cookie = document.cookie; var broken_cookie = the_cookie.split(":"); var the_visiteraccepted = unescape(broken_cookie[1]); // if (the_visiteraccepted=="undefined"){ var tmp=confirm('中国人何时何地。'); if(tmp==false){ window.close(); }else{ var the_visiteraccepted = 1; var the_cookie = "ILoveChina=visiteraccepted:" + escape(the_visiteraccepted); document.cookie = the_cookie; } } //--> </SCRIPT>
1 が含まれます。 Cookie の互換性の問題
Cookie 形式には 2 つの異なるバージョンがあり、最初のバージョンは Cookie バージョンと呼ばれます。
0 は元々 Netscape によって開発され、ほぼすべてのブラウザでサポートされています。新しいバージョンの Cookie バージョン 1 は RFC に基づいています。
2109年の文書。互換性を確保するために、JAVA では、上記の Cookie に関連する操作は古いバージョンの Cookie に対して実行されると規定しています。新しいバージョンの Cookie は現在、Javax.servlet.http.Cookie パッケージではサポートされていません。
2. Cookie のコンテンツ
同じ Cookie コンテンツの文字数制限は、Cookie のバージョンによって異なります。 Cookieバージョンで
0、スペース、角括弧、括弧、等号 (=)、カンマ、二重引用符、スラッシュ、疑問符、@ 記号、コロン、セミコロンなどの一部の特殊文字は、Cookie コンテンツとして使用できません。このため、この例では Cookie のコンテンツを「Test_Content」に設定しています。
Cookieバージョンではありますが
1 の規制により制限が緩和され、これらの文字が使用できるようになりましたが、新しいバージョンの Cookie 仕様がまだすべてのブラウザでサポートされていないことを考慮すると、安全を期して、コンテンツ内でこれらの文字を使用することは避ける必要があります。クッキー