ホームページ > 記事 > ウェブフロントエンド > JavaScript での Cookie 操作オブジェクトのアプリケーションを整理する
JavaScript での Cookie 操作オブジェクトのアプリケーションを整理する
- WBOY転載
- 2022-08-05 11:35:331389ブラウズ
この記事では、javascript に関する関連知識を提供します。主に Cookie 操作オブジェクトのアプリケーションに関連する問題を紹介します。Cookie は、Web アプリケーションがユーザー関連の情報を保存する便利な方法を提供します。見てみましょう。以下の方法で、皆さんのお役に立てれば幸いです。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
Cookie の操作方法Javascript では
Cookie は、Web アプリケーションがユーザー関連の情報を保存する便利な方法を提供します。たとえば、ユーザーが当社のサイトを訪問すると、Cookie を使用してユーザー設定やその他の情報が保存され、次回ユーザーが当社のサイトを訪問したときにアプリケーションが以前に保存した情報を取得できるようになります。
Cookie とは一体何なのか
Cookie は、ユーザーのリクエストやページとともに Web サーバーとブラウザーの間で受け渡される小さなテキスト情報です。 Cookie に含まれる情報は、ユーザーがサイトにアクセスするたびに Web アプリケーションによって読み取ることができます。
Cookie は、ユーザー情報の保存の問題を解決するために登場しました。たとえば、
ユーザーが Web ページにアクセスすると、ユーザーの名前が Cookie に保存されることがあります。
ユーザーが次回ページにアクセスしたときに、Cookie はユーザー名を記憶します。
Cookie は、すべての Web ページにわたるユーザー情報を記憶できます。これには文字列形式の情報が含まれており、キーと値のペアの形式、つまり key=value 形式で保存されます。通常、各 Cookie は「;」で区切られます。
username = Daisy Green
Cookie の欠点
Cookie が無効になる場合があります。ユーザーが個人のプライバシー保護に細心の注意を払う場合、ブラウザの Cookie 機能を無効にする可能性があります。
Cookie はブラウザに関連しています。つまり、同じページにアクセスした場合でも、異なるブラウザで保存された Cookie に相互にアクセスすることはできず、
Cookie は削除される可能性があります。各 Cookie はハード ディスク上のファイルであるため、ユーザーによって削除される可能性があります。
Cookie のセキュリティは十分に高くありません。すべての Cookie は平文形式でファイルに記録されるため、ユーザー名やパスワードなどの情報を保存したい場合は、事前に暗号化することをお勧めします。
Cooke の仕組み
サーバーは、Cookie の形式で訪問者のブラウザにデータを送信します。ブラウザが Cookie の受け入れを許可している場合。これは、訪問者のハード ドライブにプレーン テキストの記録として保存されます。
訪問者が別のページにジャンプすると、ブラウザは取得のために同じ Cookie をサーバーに送信します。取得されると、サーバーは以前に保存された内容を認識または記憶します。
Cookie の構成
Cookie HTTP ヘッダー情報のうち、HTTP Set-Cookie のヘッダー形式は次のとおりです。 code 具体例：
Set-Cookie: name=value; [expires=date]; [path=path]; [domain=domainname]; [secure];
上記の形式からもわかるように、Cookie は以下の部分から構成されています。
名前と値のペア名前と値はセミコロンで区切られます。Cookie には最大 20 のペアを含めることができます。各 Web ページには最大 1 つの Cookie を含めることができます。値の長さは 4K を超えてはなりません。 Value 値の場合は、encodeURIComponent を使用してエンコードするのが最善です。
ドメインドメイン ドメイン名も Cookie の一部です。デフォルトでは、ユーザーが訪問した Web ページのドメイン名が Cookie に保存されます。この Cookie のドメイン名の値が設定されている場合、アクセスしているサーバーだけでなく、そのドメイン名のすべてのサーバーがこの Cookie にアクセスできることを意味します。通常はこれを行うべきではありません。ドメイン名を設定する形式は次のとおりです。domain=http://xyz.com
pathWeb ページを特定のサーバーのディレクトリに設定します。 Cookie にアクセスします。パスを設定する形式は次のとおりです: path = /movies
ExpiresCookie の存続期間を設定します。デフォルトでは、Cookie は次の場合に自動的に削除されます。ユーザーがブラウザを閉じた場合、ユーザーがブラウザを閉じたときに Cookie が消えるように Cookie の有効期限を設定します。この項目を設定すると、Cookie の寿命を延ばすことができます。 Date オブジェクトの GMT 形式を使用して js で時刻を設定します。形式は次のとおりです:expires = date.toGMTString()
Securetrue または偽の値。 true の場合、Cookie は https 経由で送信される必要があります。
js Cookie
JS では、Document オブジェクトの cookie 属性を使用して cookie を操作できます。 JS は現在の Web ページの Cookie を読み取り、作成、変更、削除することができます。具体的な操作を見てみましょう。
Create CookieJS は document.cookie 属性を使用して Cookie を作成できます。次の方法で Cookie を作成できます:
<meta http-equiv="set-cookie" content=" cookieName = cookieValue; expires=01-Dec-2006 01:14:26 GMT; path=/" />
有効な日付 (UTC 時間) を追加することもできます。デフォルトでは、Cookie はブラウザを閉じるときに削除されます。
document.cookie = "username=Daisy Green";
path パラメータを通じて、Cookie がどのパスに属しているかをブラウザに伝えることができます。デフォルトでは、Cookie は現在のページに属します。
document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";Read Cookie
JS を通じて、次のような Cookie を読み取ることができます:
var x = document.cookie;
document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2
事例：
<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>改变 cookie
通过使用 JS，咱们可以像创建 cookie 一样改变它：
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
这样旧 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>删除 cookie
删除 cookie 非常简单，不必指定 cookie 值：直接把 expires 参数设置为过去的日期即可：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
应该定义 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视频教程、web前端】
以上がJavaScript での Cookie 操作オブジェクトのアプリケーションを整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。