【Cookie】ECサイトでカート情報をCookieに保存するためのJavaScriptコードサンプル例

セッションとCookieは、Webサイトにアクセスするユーザー情報を保持するための方法です。今回は、前回のCookie例のひとつで「カート情報の保持」について見ていきます。

カート情報の保持（Cookie）

ECサイトの場合、ユーザーがカートに商品を追加した場合、その情報をCookieに保存することで、次回以降のアクセス時にカートの中身を表示できます。

※Cookieの有効期限が切れた場合や、別のブラウザでアクセスした場合には、カート情報は失われます。

カートに商品を追加する関数（addToCart）

// カートに商品を追加する関数
function addToCart(item) {
    // カート情報を取得
    var cartItems = getCartItems();

    // カートに商品を追加
    cartItems.push(item);

    // カート情報をCookieに保存
    setCookie('cartItems', JSON.stringify(cartItems), 7);
}

カート情報を取得する関数（getCartItems）

[rml_read_more]

// カート情報を取得する関数
function getCartItems() {
    // Cookieからカート情報を取得
    var cartItems = getCookie('cartItems');

    // カート情報が存在しない場合は空の配列を返す
    if (!cartItems) {
        cartItems = [];
    } else {
        // JSON形式の文字列から配列に変換
        cartItems = JSON.parse(cartItems);
    }

    return cartItems;
}

Cookieに値を設定する関数（setCookie）

// Cookieに値を設定する関数
function setCookie(name, value, days) {
    var expires = '';

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = '; expires=' + date.toUTCString();
    }

    document.cookie = name + '=' + value + expires + '; path=/';
}

Cookieから値を取得する関数（getCookie）

// Cookieから値を取得する関数
function getCookie(name) {
    var nameEQ = name + '=';
    var cookies = document.cookie.split(';');

    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) === 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }

    return null;
}

まとめ

上記のコードでは、addToCart関数でカートに商品を追加すると、そのカート情報をJSON形式の文字列に変換してCookieに保存しています。

また、getCartItems関数でCookieからカート情報を取得し、配列に変換して返しています。setCookie関数とgetCookie関数は、Cookieを設定・取得するための汎用的な関数です。

以上が、Cookieを使用した例です。セッションとCookieは、それぞれの用途に合わせて使い分けることが重要です。