JS cookieの設定、取得、削除（超詳細）

プログラミングの分野では、Cookie は小さなテキスト ファイルを表し、開発者がユーザーのコンピューターに少量のデータ (約 4kb) を保存して、ユーザー ID、設定など、ユーザーの特定の情報を記録することを可能にします。ユーザーが次にアクセスする Web サイトを使用する場合、Web サイトはこの情報を取得することにより、ユーザーにパーソナライズされたページを表示できます。また、一部の e コマース Web サイトのショッピング カートでも Cookie 技術が使用されています。

 

HTTPS プロトコルが誕生する前は、Web ブラウザとサーバーは HTTP プロトコルを介して通信する必要がありました。HTTP プロトコルはステートレス プロトコルです。サーバーとブラウザが対話を完了すると (ブラウザがサーバーにリクエストを送信すると、サーバーは応答)、リンクは閉じられ、サーバーはブラウザーを忘れます。 Cookie は、サーバーがブラウザを記憶できるようにするために発明されました。

ブラウザを使用して特定のページにアクセスすると、一部のブラウザ情報が Cookie に保存されることがあります. ブラウザがサーバーにリクエストを送信するたびに、Cookie はリクエストの一部としてサーバーに送信されます.ブラウザーに情報を記憶するために Cookie を渡します。

ヒント: Cookie は複数のキーと値のペア (例: key1=value1;key2=value2 ) で構成され、Cookie は最大 4kb のデータを保存でき、長さを超える Cookie は無視されます。ブラウザ側で Cookie を無効にすることもできます。これにより、Cookie の助けを借りてのみ実行できる一部の操作ができなくなります。また、アカウント番号やパスワードなどの機密情報を Cookie に保存しないでください。

クッキーは本来、PHPやASPなどのサーバーサイドスクリプト言語向けに設計されたものですが、JavaScriptでも操作できますが、操作が複雑になるため、JavaScriptを使ってクッキーを操作する方法を簡単に紹介します。

JS Set Cookie

JavaScript では、 document.cookieプロパティを介して Cookie 情報を作成、読み取り、変更、および削除できます。

新しい Cookie 情報を作成 (設定) するには、次の例に示すように、 name=valueの形式の文字列で新しい Cookie 情報を定義する必要があります。

document.cookie = “url=https://it-kiso.com/”;

Cookie データにはセミコロン、カンマ、またはスペースを含めることはできないため、JavaScript の組み込みの encodeURIComponent() 関数を使用して、データをエンコードしてから Cookie に格納できます。 Cookie を読み取るときは、次の例に示すように、対応する decodeURIComponent() 関数を使用して Cookie データを解析します。

document.cookie = “url=” + encodeURIComponent(“https://it-kiso.com/”);

注: 上記のコードを実行すると、Cookie が作成されていないことがわかります。これは、Cookie がサーバーとの対話に使用されるためです。Cookie を正常に作成するには、サーバー環境の助けが必要です。 「 PHP 開発環境」セクションを読んで簡単な開発環境を構築し、定義済みの HTML ファイルをアプリケーション ディレクトリ (デフォルトでは、インストール ディレクトリの apache2/htdocs ディレクトリの下にあります) に移動してから、HTML ファイルにアクセスします。

Cookie は常に存在するとは限りません. デフォルトでは、Cookie のライフ サイクルはブラウザーのセッション サイクルです。つまり、ユーザーがブラウザーを閉じた後、Cookie は無効になります。 If you want to extend the life cycle of the cookie, you can use the max-age attribute to specify the time (in seconds) that the cookie can exist. デフォルトは -1 で、ブラウザを閉じた後に有効期限が切れることを意味します。

max-age が負の数に設定されている場合、Cookie は一時的な Cookie であり、ブラウザーを閉じると無効になることを意味します。 0 に設定すると、Cookie を削除することを意味します。 Cookie のライフサイクルを 30 日に設定する場合は、次のようにします。

document.cookie = “url=https://it-kiso.com/; max-age=” + 30*24*60*60;

さらに、次のように、expires 属性を使用して、Cookie の有効期限が切れる特定の日付 (GMT/UTC 形式) を指定することもできます。

document.cookie = “url=https://it-kiso.com/; expires=Sun, 31 Dec 2017 12:00:00 UTC;”;

ヒント: Cookie のライフサイクルを設定することで、Cookie の存続期間を延長できるだけでなく、事前に Cookie を無効化することもできます。

デフォルトでは、Cookie は同じドメイン名の下にあるすべての Web ページで使用できますが、Cookie に path 属性を設定すると、指定されたドメイン名のパス (たとえば、ドメイン名) の下にある Web ページでのみ Cookie を使用できます。 Web サイトの URL が it-kiso.com の場合、path 属性が/に設定されている場合、そのドメイン名の下のすべての Web ページで Cookie を使用できることを意味し、path 属性が/javascript/に設定されている場合、Cookie はhttps://it-kiso.com/javascript/ 以下の Web ページでのみ使用してください。使用中のサンプル コードは次のとおりです。

document.cookie = “url=https://it-kiso.com/; path=/”;

指定したドメイン名の下のサブドメインで Cookie を使用する場合は、domain 属性を介して設定できます. デフォルトでは、Cookie は設定されているドメイン名の下でのみ使用できます. サンプル コードは次のとおりです:

document.cookie = “url=https://it-kiso.com/; path=/; domain=.it-kiso.com”;

domain 属性が.it-kiso.comに設定されている場合、 .it-kiso.comで終わるすべてのドメイン名で Cookie を使用できることを意味します. .属性値の最初の文字は省略できないことに注意してください.

さらに、Cookie には属性名だけで属性値を持たない secure 属性があります.この属性が設定されている場合,Cookie は HTTPS プロトコルのみを介して送信されることを意味します.サンプルコードは次のとおりです.

document.cookie = “url=https://it-kiso.com/; path=/; domain=.it-kiso.com; secure”;

Cookie の設定を容易にするために、次のように関数を定義できます。

 /**
* Cookie を追加する
* @param {[string]} name       [Cookie の名称]
* @param {[string]} value      [Cookie の値]
* @param {[number]} daysToLive [Cookie の有効期限]
*/
function setCookie(name, value, daysToLive) {
    // セミコロン、コンマ、スペースをエスケープするために cookie 値をエンコードする
    var cookie = name + "=" + encodeURIComponent(value);
   
    if(typeof daysToLive === "number") {
        /* max-age 属性を設定する */
        cookie += "; max-age=" + (daysToLive*24*60*60);
    }
    document.cookie = cookie;
} 

JS は Cookie を取得します

Cookie を読み取る (取得する) には、 document.cookieを使用することもできます。これは、max-age、expires、path、および domain を除くすべての Cookie 情報を含む文字列を返します。たとえば、 url=https://it-kiso.com/; course=JavaScript .単一の Cookie の値を取得するには、split() 関数を使用して、Cookie 情報を含む文字列を配列に分割し、特定の Cookie の値を取得することができます. サンプル コードは次のとおりです。

 document.cookie = "url=https://it-kiso.com/; max-age=" + 30*24*60*60;
document.cookie = "course=JavaScript";
document.cookie = "title=cookie";       

function getCookie(name) {
    // Cookie文字列を分割する
    var cookieArr = document.cookie.split(";");
   
    // 配列要素をループする
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
       
        /* クッキー名の頭の空白を削除し、与えられた文字列と比較する */
        if(name == cookiePair[0].trim()) {
            // クッキーの値をデコードし、返す
            return decodeURIComponent(cookiePair[1]);
        }
    }
    // 見つからない場合はnullを返す
    return null;
}
document.write("url = " + getCookie("url") + "<br>");           // url = https://it-kiso.com/を出力
document.write("course = " + getCookie("course") + "<br>");     // course = JavaScriptを出力
document.write("title = " + getCookie("title"));                // title = cookieを出力 

JS は Cookie の値を変更または更新します

Cookie の値を変更または更新する唯一の方法は、同じ名前の Cookie を作成して、変更されたものを置き換えることです。変更する Cookie がパス属性を定義する場合、この属性を変更するときに同じパス属性も定義する必要があることに注意してください。そうしないと、新しい Cookie が作成されます。サンプルコードは次のとおりです。

 // Cookieを作成する
document.cookie = "url=https://it-kiso.com/; path=/; max-age=" + 30*24*60*60;
// このCookieを変更する
document.cookie = "url=https://it-kiso.com/javascript/; path=/; max-age=" + 365*24*60*60; 

ヒント: path 属性が/の場合、変更時に path 属性を省略することもできます。

Cookie の削除は、Cookie の変更と似ています。次の例に示すように、Cookie の値を再び空に設定し、expires 属性を過去の日付に設定するだけで済みます。

 // Cookieを作成する
document.cookie = "url=https://it-kiso.com/; path=/; max-age=" + 30*24*60*60;
// このCookieを削除する
document.cookie = "url=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 

または、max-age 属性を 0 に設定して Cookie を削除することもできます。