jQueryでCookie操作 (Translation: Cookie Manipulation with jQuery)

jQueryでCookieを作成、読み取り、削除

Cookieとは

Cookieは、ウェブサイトがユーザーのコンピュータに保存する小さなテキストファイルです。これにより、ウェブサイトはユーザーの情報を記憶し、次回の訪問時にカスタマイズされた体験を提供することができます。

jQueryでCookieを作成する

$.cookie('myCookie', 'myValue');

• myValue: Cookieの値です。
• myCookie: Cookieの名前です。

var myCookieValue = $.cookie('myCookie');

• myCookieValue: Cookieの値を格納する変数です。

$.removeCookie('myCookie');

複数の値を保存する

$.cookie('myCookie', JSON.stringify({
    name: 'John Doe',
    age: 30
}));

• JSON.stringify(): JavaScriptオブジェクトをJSON文字列に変換します。

Cookieのオプション

• secure: HTTPS接続でのみCookieを送信します。
• domain: Cookieの有効ドメインを設定します。
• path: Cookieの有効範囲を設定します。

例

$.cookie('myCookie', 'myValue', { expires: 7, path: '/' });

Cookieの作成と読み取り

// Cookieを作成
$.cookie('username', 'john_doe', { expires: 7, path: '/' });

// Cookieを読み取る
var username = $.cookie('username');
console.log(username); // 出力: john_doe

Cookieの削除

$.removeCookie('username');

var user = {
    name: 'John Doe',
    age: 30
};

// JSON文字列に変換して保存
$.cookie('userData', JSON.stringify(user), { expires: 30 });

// JSON文字列を読み取ってオブジェクトに変換
var userData = JSON.parse($.cookie('userData'));
console.log(userData.name); // 出力: John Doe

// 有効期限を設定
$.cookie('myCookie', 'myValue', { expires: 365 });

// パスを設定
$.cookie('myCookie', 'myValue', { path: '/admin' });

// ドメインを設定
$.cookie('myCookie', 'myValue', { domain: '.example.com' });

// HTTPS接続でのみ送信
$.cookie('myCookie', 'myValue', { secure: true });

JavaScriptの組み込み機能

// Cookieを作成
document.cookie = "username=john_doe; expires=" + new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";

// Cookieを読み取る
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    var name = cookie.substring(0, cookie.indexOf('='));
    var value = cookie.substring(cookie.indexOf('=') +    1);
    if (name === "username") {
        console.log(value); // 出力: john_doe
        break;
    }
}

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

Cookieライブラリ

他にも、Cookie操作を簡素化するための多くのライブラリが存在します。例えば、js-cookieライブラリは、jQueryのCookie操作と似たAPIを提供します。

// Cookieを作成
Cookies.set('username', 'john_doe', { expires: 7, path: '/' });

// Cookieを読み取る
var username = Cookies.get('username');
console.log(username); // 出力: john_doe

// Cookieを削除
Cookies.remove('username');