ホームページ > 記事 > ウェブフロントエンド > JavaScript Cookieの使用方法（概念、設定、読み取り、削除）
JavaScript Cookieの使用方法（概念、設定、読み取り、削除）
- 高洛峰オリジナル
- 2017-01-18 13:20:321256ブラウズ
この記事の例では、JavaScript Cookie の使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
1. Cookie とは何ですか?
Cookie は、自動ログイン、ユーザー名の記憶などの情報を保存するためにページで使用されます。
2. Cookieの特徴
同じウェブサイト内のすべてのページは一連のCookieを共有します
Cookieには数量とサイズの制限があります
Cookieには有効期限があります
3.
document.cookie を通じて Cookie を書き込みます
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>cookie基础</title> </head> <body> </body> </html> <script type="text/javascript"> document.cookie = 'username=abc'; document.cookie = 'password=123'; document.cookie = 'email=abcdef@123.com'; </script>
ブラウザを開いて Cookie を表示すると、新しく定義された Cookie が元の Cookie を上書きしないことがわかります。
有効期限が設定されていない場合は、ブラウザを閉じると Cookie がクリアされます。有効期限を設定するにはどうすればよいですか?答えは「有効期限が切れる」です。通常は、Date オブジェクトと組み合わせて使用します。
var d = new Date(); d.setTime(d.getTime() + 1 * 3600 * 1000); document.cookie = 'username=abc; expires=' + d.toGMTString();
Firefox ブラウザを通して、ユーザー名の有効期限が現在時刻から 1 時間後であることがわかります。
最後に Cookie を取得するメソッドをカプセル化します:
function setCookie(name,value,hours){
var d = new Date();
d.setTime(d.getTime() + hours * 3600 * 1000);
document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}Cookie の設定方法を学習しましたが、Cookie をどのように読み取るでしょうか?
まず、Cookie にはどのような種類のコンテンツが含まれているか見てみましょう。
document.cookie = 'username=abc'; document.cookie = 'password=123'; document.cookie = 'email=abcdef@123.com'; typeof document.cookie; //string alert(document.cookie); //'username=abc; password=123; email=abcdef@123.com'
取得するのは文字列です。各 ; の後にスペースがあることに注意してください。
では、具体的な値を取得するにはどうすればよいでしょうか?添付コード:
function getCookie(name){
var arr = document.cookie.split('; ');
for(var i = 0; i < arr.length; i++){
var temp = arr[i].split('=');
if(temp[0] == name){
return temp[1];
}
}
return '';
}Cookie の設定と取得に加えて、Cookie を削除することもできます。インターネット上でユーザー名をクリアするなどの機能がよく見られますが、実際には Cookie のクリアが使用されています。
Cookie のクリアは実際には非常に簡単で、有効期限を過去の時間に設定するだけです。
function removeCookie(name){
var d = new Date();
d.setTime(d.getTime() - 10000);
document.cookie = name + '=1; expires=' + d.toGMTString();
}最後に、Cookie の設定、取得、クリアを Cookie.js にカプセル化します
?
1234567891011121314151617181920 function setCookie(name,value,hours){ var d = new Date(d.getTime(); + 時間 * 3600 * 1000); document.cookie = 名前 + '=' + 値 + '; 期限切れ=' + d.toGMTString();}function getCookie(name){ var arr = document.cookie.split(' ; '); for(var i = 0; i この記事が JavaScript プログラミングのすべての人に役立つことを願っています。 JavaScript Cookie の使用法 (概念、設定、読み取り、削除) に関するさらに基本的なチュートリアルについては、PHP 中国語 Web サイトに注目してください。