JavaScriptクッキー
Cookieを使用すると、ユーザー情報をWebページに保存できます。
クッキーとは何ですか？
Cookieは、コンピューター上の小さなテキストファイルに保存されるデータです。
WebサーバーがWebページをブラウザーに送信すると、接続がシャットダウンされ、サーバーはユーザーに関するすべてのことを忘れます。
Cookieは、「ユーザーに関する情報を記憶する方法」の問題を解決するために考案されました。
- ユーザーがWebページにアクセスすると、そのユーザーの名前をCookieに保存できます。
- 次回ユーザーがページにアクセスすると、Cookieはユーザーの名前を「記憶」します。
Cookieは、次のような名前と値のペアで保存されます。
username = John Doe
ブラウザがサーバーにWebページを要求すると、そのページに属するCookieが要求に追加されます。このようにして、サーバーはユーザーに関する情報を「記憶」するために必要なデータを取得します。
ブラウザでローカルCookieのサポートがオフになっている場合、以下の例はいずれも機能しません。
JavaScriptでCookieを作成する
JavaScriptは、プロパティを使用してCookieを作成、読み取り、および削除できますdocument.cookie
。
JavaScriptを使用すると、次のようにCookieを作成できます。
document.cookie = "username=John Doe";
有効期限（UTC時間）を追加することもできます。デフォルトでは、ブラウザを閉じるとCookieは削除されます。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
パスパラメータを使用すると、Cookieが属するパスをブラウザに通知できます。デフォルトでは、Cookieは現在のページに属します。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
JavaScriptでCookieを読む
JavaScriptを使用すると、Cookieは次のように読み取ることができます。
let x = document.cookie;
document.cookie次のように、すべてのCookieを1つの文字列で返します。cookie1= value; cookie2 = value; cookie3 = value;
JavaScriptでCookieを変更する
JavaScriptを使用すると、Cookieを作成するのと同じ方法でCookieを変更できます。
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
古いクッキーは上書きされます。
JavaScriptでCookieを削除する
クッキーの削除はとても簡単です。
Cookieを削除するときに、Cookieの値を指定する必要はありません。
有効期限パラメータを過去の日付に設定するだけです。
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
正しいCookieを確実に削除するために、Cookieパスを定義する必要があります。
一部のブラウザでは、パスを指定しないとCookieを削除できません。
クッキー文字列
プロパティは通常のテキスト文字列のdocument.cookieように見えます。そうではありません。
cookie文字列全体をdocument.cookieに書き込んだとしても、それを再度読み取ると、その名前と値のペアしか表示されません。
新しいCookieを設定しても、古いCookieは上書きされません。新しいCookieがdocument.cookieに追加されるため、document.cookieをもう一度読むと、次のようになります。
cookie1 =値; cookie2 =値;
指定された1つのCookieの値を検索する場合は、Cookie文字列内のCookie値を検索するJavaScript関数を作成する必要があります。
JavaScriptCookieの例
次の例では、訪問者の名前を格納するCookieを作成します。
訪問者が初めてWebページにアクセスしたときに、名前を入力するように求められます。その後、名前はCookieに保存されます。
次回、同じページにアクセスすると、ウェルカムメッセージが表示されます。
この例では、3つのJavaScript関数を作成します。
- クッキーの値を設定する関数
- Cookieの値を取得する関数
- クッキーの値をチェックする機能
クッキーを設定する機能
まず、function訪問者の名前をcookie変数に格納するを作成します。
例
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
説明された例：
上記の関数のパラメーターは、Cookieの名前（cname）、Cookieの値（cvalue）、およびCookieの有効期限が切れるまでの日数（exdays）です。
この関数は、cookiename、cookie値、およびexpires文字列を合計してcookieを設定します。
クッキーを取得する関数
次に、function指定されたCookieの値を返すを作成します。
例
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
機能の説明：
cookienameをパラメーター（cname）として使用します。
検索するテキスト（cname + "="）を使用して変数（name）を作成します。
特殊文字（例：「$」）を含むCookieを処理するために、Cookie文字列をデコードします
セミコロンのdocument.cookieをca（ca = decodeCookie.split（ ';'））という配列に分割します。
ca配列（i = 0; i <ca.length; i ++）をループし、各値c = ca [i]を読み取ります。
Cookieが見つかった場合（c.indexOf（name）== 0）、Cookieの値（c.substring（name.length、c.length））を返します。
Cookieが見つからない場合は、「」を返します。
クッキーをチェックする機能
最後に、Cookieが設定されているかどうかをチェックする関数を作成します。
Cookieが設定されている場合は、挨拶が表示されます。
setCookieCookieが設定されていない場合は、ユーザーの名前を尋ねるプロンプトボックスが表示され、次の関数を呼び出してユーザー名Cookieを365日間保存します。
例
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
すべて一緒に今
例
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
上記の例ではcheckCookie()、ページが読み込まれたときに関数を実行します。