カリキュラム

JS チュートリアル

JS バージョン

JS オブジェクト

JS メソッド

JS クラス

JS アシンクリーナ

JS HTML DOM

JS ブラウザ BOM

JS Web API

JS AJAX

JS JSON

JS vs jQuery

JS グラフィック

JS 実例

JS 参考マニュアル

選択科目

コース推薦：

CodeW3C.com ガジェットボックス

JavaScript クッキー

前のページ JS タイミング
次のページ Web API 介绍

Cookieを使って、ウェブページでユーザー情報を保存できます。

Cookieとは何ですか？

Cookieは小さなテキストファイルにあなたのコンピュータ上に保存されるデータです。

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

Cookieは「ユーザーの情報をどう記憶するか」を解決するために作られました：

ユーザーがウェブページにアクセスするとき、彼の名前はcookieに保存されます。
次にユーザーがそのページにアクセスしたとき、cookieが彼の名前を「覚えて」います。

Cookieは名前と値のペアで保存されます、例えば：

username = Bill Gates

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

ブラウザがローカルcookieのサポートを停止している場合、以下の例はすべて動作しません。

JavaScriptでcookieを作成する方法

JavaScriptを使って document.cookie cookieの作成、読み取り、削除の属性。

JavaScriptを使ってcookieを作成できます：

document.cookie = "username=Bill Gates";

有効な日付（UTC時間）を追加することもできます。デフォルトでは、ブラウザが閉じるとcookieが削除されます：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

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

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

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

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

var x = document.cookie;

document.cookie すべてのcookieが一つの文字列として返されます、例えば：cookie1=value; cookie2=value; cookie3=value;

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

JavaScriptを使用して、cookieを設定したときと同様に変更することができます：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

古いcookieは上書きされます。

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

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

cookieを削除する際にはcookieの値を指定する必要はありません：

直接 expires 過去の日付に設定することで良いです：

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

正しいcookieを削除するために、cookieのパスを定義する必要があります。

パスを指定しない場合、一部のブラウザではcookieを削除することができません。

Cookie文字列

document.cookie 属性は正常なテキスト文字列のように見えますが、そうではありません。

あなたが document.cookie 完全なcookie文字列を書き込むと、再度読み取ったときには名前-値ペアしか見えません。

新しいcookieが設定された場合、古いcookieは上書きされません。新しいCookieはdocument.cookieに追加されますので、document.cookieを読み取った場合、以下のようなものになります：

cookie1 = value; cookie2 = value;

指定された cookie の値を見つけるには、cookie 文字列内で検索するための JavaScript 関数を書かなければなりません。

JavaScript Cookie インスタンス

以下の例では、訪問者の名前を保存するために cookie を創ります。

訪問者が初めてウェブページに到着したとき、彼に名前を入力させるように求め、その名前を cookie に保存します。

次回訪問者が同じページに到着したとき、彼はウェルカムメッセージを受け取ります。

例えば、3つの JavaScript 関数を創ります：

cookieの値を設定する関数
cookieの値を取得する関数
cookieの値をチェックする関数

cookieの設定関数

まず、訪問者の名前を cookie 変数に保存する関数を創ります：

例

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

例説明：

この関数の引数は、cookieの名前（cname）、値（cvalue）、cookieが有効期限を過ぎる日数（exdays）です。

cookieの名前、値、有効期限文字列を合計して、この関数はcookieを設定します。

cookieの取得関数

次に、指定された cookie の値を返す関数を創ります：

例

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

関数の説明：

cookie をパラメータ（cname）として渡します。

変数（name）と検索するテキスト（CNAME」=」）を創ります。

cookie 文字列をデコードし、特別な文字を持つ cookie を処理します。例えば「$」。

document.cookieをセミコロンで分割し、ca（decodedCookie.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が設定されているかどうかを確認する関数を作成します。

cookieが設定されている場合、挨拶を表示します。

cookieが設定されていない場合、ユーザー名を入力するようにするポップアップを表示し、ユーザー名をcookieに365日保存します。 setCookie 関数：

例

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    }
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

これを組み合わせて

例

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var 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() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    }
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

自分で試してみる

上記の例はページが読み込まれた後に checkCookie() 関数を実行します。

前のページ JS タイミング
次のページ Web API 介绍