ホームページ > 記事 > ウェブフロントエンド > JavaScriptでCookieをクリアする方法
JavaScriptでCookieをクリアする方法
- 青灯夜游オリジナル
- 2021-06-17 14:31:5611164ブラウズ
明確な方法: Cookie 値を指定せず、expires パラメーターを過去の日付に設定するだけです。構文は「document.cookie="username=;expires=Thu,01 Jan 1970 00:00:00」です。 UTC;パス ==;「;」。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
Cookie は、Web アプリケーションがユーザーに関する情報を保存する便利な方法を提供します。たとえば、ユーザーが当社のサイトを訪問すると、Cookie を使用してユーザー設定やその他の情報が保存され、次回ユーザーが当社のサイトを訪問したときにアプリケーションが以前に保存した情報を取得できるようになります。
Cookie とは一体何ですか<br>
Cookie は、ユーザーのリクエストに付随する小さなテキスト情報です。およびページ Web サーバーとブラウザーの間で渡されます。 Cookie に含まれる情報は、ユーザーがサイトにアクセスするたびに Web アプリケーションによって読み取ることができます。
Cookie は、ユーザー情報の保存の問題を解決するために登場しました。たとえば、
ユーザーが Web ページにアクセスすると、ユーザーの名前が Cookie に保存されることがあります。
ユーザーが次回ページにアクセスすると、Cookie がユーザー名を記憶します。
Cookie は、すべての Web ページにわたるユーザー情報を記憶できます。これには文字列形式の情報が含まれており、キーと値のペアの形式、つまり key=value 形式で保存されます。通常、各 Cookie は「;」で区切られます。
ユーザー名 = Daisy Green
Cookie の構成<br>
HTTP の Cookieヘッダー情報として、HTTP Set-Cookie のヘッダー形式は次のとおりです。
Set-Cookie: name=value; [expires=date]; [path=path]; [domain=domainname]; [secure];
HTTP コードの具体的な例: <br>
<meta http-equiv="set-cookie" content=" cookieName = cookieValue;expires=01-Dec-2006 01:14:26 GMT; path=/" />
上記の形式からわかるように、Cookie以下の部分から構成されます。 <br>
名前/値のペア
名前/値はセミコロンで区切られます。Cookie には最大 20 のペアがあります。各 Web ページには最大 1 つの Cookie があります。値の長さ4Kを超えないこと。 Value 値の場合は、encodeURIComponent を使用してエンコードするのが最善です。
JS Cookie<br>
JS では、Document オブジェクトの cookie 属性を使用して cookie を操作できます。 JS は現在の Web ページの Cookie を読み取り、作成、変更、削除することができます。具体的な操作を見てみましょう。
Create Cookie<br>
JS は document.cookie 属性を使用して Cookie を作成できます。Cookie は次の方法で作成できます:
document.cookie = "username=Daisy Green";
有効な日付 (UTC 時間) を追加することもできます。デフォルトでは、Cookie はブラウザを閉じると削除されます: <br>
document.cookie = "username=Daisy Green; Expires=Mon, 26 Aug 2019 12:00:00 UTC";<br> Through path パラメータを使用すると、Cookie がどのパスに属しているかをブラウザに伝えることができます。デフォルトでは、Cookie は現在のページに属します。
document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC"; path=/";
Read Cookie<br>
JS を通じて、次のように Cookie を読み取ることができます:
var x = document.cookie;
<span style="font-family: " microsoft yahei sans gb helvetica neue tahoma arial sans-serif>document。 cookie すべての Cookie は文字列で返されます (例: cookie1=value; cookie2</span><br>
Example:
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the Button to View Result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>Run:
Cookie の変更
JS を使用すると、Cookie を作成するのと同じように変更できます:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
この古いクッキーは上書きされます。
例:
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>実行:
##Cookie の削除<br>##Cookie の削除は次のとおりです。非常に簡単で、Cookie 値を指定する必要はありません。expires パラメータを過去の日付に設定するだけです:
document.cookie = "username=;expires=Thu, 01 Jan 1970 00:00 :00 UTC; path=/;";<br>正しい Cookie が確実に削除されるように、Cookie パスを定義する必要があります。パスが指定されていない場合、一部のブラウザでは Cookie を削除できません。
例:
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>プログラミング関連の知識については、
プログラミング ビデオ以上がJavaScriptでCookieをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。