JavaScriptのCookie

Cookiesを使用して、ユーザーのWebブラウザに情報を保存できます。

Cookieとは何ですか？

Cookieは小さなテキストファイルで、ユーザーのコンピュータ上に少量のデータを保存するために使用されます（近4KB）。

Webサーバーがブラウザにウェブページを送信した後、接続が閉じられ、サーバーはユーザーに関する全ての情報を忘れます。

「ユーザーに関する情報をどうやって覚えるか」という問題を解決するためにCookiesが発明されました。

Cookiesは情報を追跡するために使用できます、例えばユーザーの好みなど、ユーザーが次にウェブサイトにアクセスしたときに、ウェブサイトがページをパーソナライズするために情報を検索できます。

Cookiesは「名称=値」のペアの形式で保存されます、例えば：

username　=　Seagull

ブラウザがサーバーからウェブページをリクエストする際、そのページに属するcookieがリクエストに追加されます。そのため、サーバーはユーザーに関する情報を「覚える」ために必要なデータを取得できます。

JavaScriptを使用してCookieを作成する

JavaScriptでは、以下のように使用できます：document.cookie属性を作成、読み取り、削除する方法です。

以下のようにcookieを作成できます：

　　document.cookie　=　"username=Seagull";

UTC時間で指定された到期日を追加することもできます。デフォルトでは、ブラウザを閉じるとcookieが削除されます：

　　document.cookie　=　"username=Seagull;　expires=Mon,　25　Mar　2019　12:00:00　UTC";

pathパラメータを使用して、ブラウザにcookieがどのパスに属しているかを伝えることができます。デフォルトでは、cookieは現在のページに属しています：

　　document.cookie　=　"username=Seagull;　expires=Mon,　25　Mar　2019　12:00:00　UTC;　path=/";

JavaScriptを使用してCookieを読み取る

JavaScriptでは、以下のようにcookieを読み取ることができます：

　　var　x　=　document.cookie;

cookieの読み取りは少し複雑です、なぜなら、document.cookie属性は、セミコロンとスペースで区切られたすべてのcookieを含む一つの文字列を返します（例：cookieの名前=値対、例：cookie1 = value; cookie2 = value; cookie3 = value）。このリストから単一のcookieを取得するには、split()それを単一のname = valueペアに分割し、特定の名前を検索する方法があります。

この文字列には属性（expires、path、domainなど）が含まれていないため、Cookieセットに属している可能性があります。

JavaScriptを使用してCookieを変更する

cookieを変更または修正する唯一の方法は、同じnameと既存のcookieのpathを持つ別のcookieを作成することです。

　　document.cookie　=　"username=Ankit;　expires=Mon,　25　Mar　2019　12:00:00　UTC;　path=/";

注意：同じnameを持つが異なるcookie pathを持つCookieを作成すると、既存のcookieは変更されず、追加のcookieが追加されます。

JavaScriptを使用してCookieを削除する

Cookieの削除は非常に簡単です。Cookieの削除：

• 同じ設定のnameを使用して、空の値を指定するだけで良いです

• またはexpiresパラメータを経過した日付に設定します

　　document.cookie　=　"username=;　expires=Thu,　01　Jan　1970　00:00:00　UTC;　path=/";

パスがcookie指定または他の属性が設定されている場合、それらも削除する必要があります。

JavaScript Cookieの例

以下の例では、ユーザー名を保存するcookieを作成します。

ユーザーがこのページを初めて訪問した場合、名前を入力するように求められます。/彼女が名前を入力し、その名前をcookieに保存します。

同じページに再度アクセスした場合、ユーザー/cookieに保存された値を取得します。

例として、以下を作成します2JavaScript関数：

• Cookie値を設定する機能

• Cookie値を取得する関数

cookieを保存します

まず、訪問者の名前をcookie変数に保存する関数を作成します。

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth()　+　1);
　　var expires = "expires="+　now.toUTCString();
　　document.cookie = cname;　+　"=="　+　cvalue　+　";　+　expires　+　";path=/";
}

機能説明：

上記の関数の引数はcookieの名前（cname）とcookieの値（cvalue）です。

この関数はcookie名、cookie値、expires文字列（1（月）を合わせてcookieを設定します。

cookieを読み取ります

次に、指定されたcookie値を表示する関数を作成します。

function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr　=　allcookies.split(';');
　　for(var　i　=　0;　i　<　cookieArr.length;　i++)　{
　　　　　var　cookiePair　=　cookieArr[i].split("=");
　　　　　if(cname　==　cookiePair[0].trim())　{
　　　　　　　　document.write　("Key　is:　"　+　cookiePair[0]　+　"　and　Value　is:　"　+　cookiePair[1]);
　　　　　}
　　}
}

関数説明：

この関数はcookie名（cname）を引数として受け取ります。

すべてのcookieを取得します（allcookies = document.cookie）。

分号で区切られたdocument.cookieをcookieArr配列に分割します（cookieArr = allcookies.split（';'））。

cookieArr配列をループ（i = 0; i <cookieArr.length; i ++），各値を読み出します（cookiePair = cookieArr [i]）。

cookie（cname == cookiePair [0]）が見つかった場合、cookieのキーと値（cookiePair [0]，cookiePair [1]）。

合并在一起

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth()　+　1);
　　var expires = "expires="+　now.toUTCString();
　　document.cookie = cname;　+　"=="　+　cvalue　+　";　+　expires　+　";path=/";
}
function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr　=　allcookies.split(';');
　　for(var　i　=　0;　i　<　cookieArr.length;　i++)　{
　　　　　var　cookiePair　=　cookieArr[i].split("=");
　　　　　if(cname　==　cookiePair[0].trim())　{
　　　　　　　　　　　document.write　("Key　is:　"　+　cookiePair[0]　+　"　and　Value　is:　"　+　cookiePair[1]);
　　　　　}
　　}
}

Cookies属性

Cookiesは具有5各属性のテキストデータレコード：