はじめに

jQueryのプラグインであるjquery-cookie.jsを利用する機会があったので備忘録として残しておきます。

jquery-cookie.js

jquery-cookie.jsはjQueryを用いてcookieの登録や取得、削除等を行うプラグインです。

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

使い方は以下です。

cookieの登録

$.cookie('cookieのname', 'cookieのvalue', { '各属性' });

各属性ではexpires, path, secure, domainが設定できます。
※各属性の説明は以下が参考になるかと思います。

cookieの概要と各属性について勉強してみた。 - おーみんブログ

cookieの取得

$.cookie('取得したいcookieのname');

cookieの削除

$.removeCookie('削除したいcookieのname');

サンプルコード

実際にjquery-cookie.jsを用いて動かしてみました。

下記のコードは画面上にボタンを3つ出し、それぞれのボタンを押下するとボタンに書いている操作が行われます。

<!DOCTYPE html>
<html>
<body>
<button id="CookieGet">cookieを取得する</button>
<button id="CookieRegist">cookieを登録する</button>
<button id="CookieDelete">cookieを削除する</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
    // cookieの登録
    $('#CookieRegist').click(function(){
        $.cookie(
            'test_cookie',
            'this is test',
            {
                expires: 10,
                path: '/',
                secure: false
            }
        );
    });
    
    // cookieの取得
    $('#CookieGet').click(function(){
        alert(`取得したcookieの値は${$.cookie('test_cookie')}です。`);
    });
    
    // cookieの削除
    $('#CookieDelete').click(function(){
        $.removeCookie('test_cookie');
    });
});
</script>
</body>
</html>