jquery.cookie.jsでcookieの保存、削除、保存期限を操作する

jquery.cookie.jsでカンタンにcookie(クッキー)を操作して次回から表示しないやつを作ってみる。

jquery.cookie.jsのダウンロード
cookieの設定
cookieの保存
cookieの削除
cookieがあるかどうかで処理を変える
次回から表示しないボタン
cookieを保存したまま移動

jquery関連記事

jquery.cookie.jsのダウンロード

jQuery本体とjquery.cookie.jsを準備します。
ダウンロードはGitHubから。
ダウンロードしたらhtmlに読み込みます。

GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:

No longer maintained, superseded by JS Cookie:. Contribute to carhartl/jquery-cookie development by creating an account on GitHub.

html

<script src="./jquery.js" type="text/javascript"></script>
<script src="./jquery.cookie.js" type="text/javascript"></script>

cookieの設定

JavaScript

$.cookie("cookie1", "red", {expires: 7, path: "/", domain: "sample.com", secure: true});

上のコードで、cookie1というcookieにredという値を入れています。
基本的にはこれだけでcookieを扱えます。
波括弧の中に有効期限などのオプションも指定できます。

expiresは有効期限で、この指定では7日間になります。
省略するとブラウザを閉じたときにcookieを削除します。
pathは保存するパス名を指定します。この指定ではサイト全体で利用することができます。
domainで有効となるドメインを指定します。
secureSSL接続の場合のみに送信します。

cookieの保存

html

<button type="button" id="keep1">cookie1の保存</button>

JavaScript

$('#keep1').click(function(){
    $.cookie("cookie1", "test");
});

デモのcookieの保存の部分です。ボタンクリックでcookie1にtestの値をセットしています。

cookieの削除

html

<button type="button" id="delete1">cookie1の削除</button>

JavaScript

$('#delete1').click(function(){
    $.removeCookie("cookie1");
});

$.removeCookie("cookie1");でcookie名を指定すれば削除できます。

cookieがあるかどうかで処理を変える

html

<button type="button" id="keep2">値：red</button>
<button type="button" id="keep3">値：blue</button>

JavaScript

function check(){
    if ($.cookie("cookie1") == "red") {
        $('.fix_status').css("background-color","#f9c1c1");
    }else if ($.cookie("cookie1") == "blue") {
        $('.fix_status').css("background-color","#bbe7ff");
    }else{
        $('.fix_status').css("background-color","#fff");
    }
};
$('#keep2').click(function(){
    $.cookie("cookie1", "red");
    check();
});

$('#keep3').click(function(){
    $.cookie("cookie1", "blue");
    check();
});

cookieの取得は$.cookie("cookie1")でできるので取得したcookieの値で分岐させ、背景色を変更しています。

また、cookieの値の変更は、cookieの保存と同じ$.cookie("cookie1", "blue");で値の変更ができます。
押すボタンによって値を分けています。

次回から表示しないボタン

html

<input type="checkbox" id="public" value="">
<label for="public">次回から表示しない</label>
<div id="oc_box">
    <p>コンテンツ</p>
</div>

JavaScript

if ($.cookie("cookie2") == "close") {
    $("#public").prop('checked', true);
}else{
    $("#oc_box").show();
}

function checkcookie(){
    if ($("#public").prop('checked') == true) {
        $.cookie("cookie2", "close");
    }else{
        $.removeCookie("cookie2");
    }
};

function toggleslide(){
    if ($.cookie("cookie2")) {
        $("#oc_box").slideUp();
    }else{
        $("#oc_box").slideDown();
    }
};

$('#public').click(function(){
    checkcookie();
    toggleslide();
});

だらだら書きましたが一番最初のif ($.cookie("cookie2") == "close")でリロードなどでページに来た時にcookieがあるかの状態を確認しcheckboxにチェックを入れたり、コンテンツの表示/非表示の処理をしています。

functionの処理は、
function toggleslide()cookieの値でコンテンツの表示/非表示を、
function checkcookie()でcheckboxの選択状態でcookieの状態を変更しています。

最後の$('#public').click(function()でcheckboxがクリックされたら2つのfunctionを実行しています。