Web制作Takahide

【コピペOK】Cookie利用を簡単に！コーディングを解説（jquery.cookie.js利用）

こんにちは、Webクリエイターのたかひで（@takahide_web）です。

あなたはこんなお悩みないでしょうか。

・Cookieの基本的な使い方がわからない

・Cookieの活用場面がわからない

・jquery.cookie.jsの使い方がわからない

こんなお悩みにお答えします。

私自身、以下ツイートの通り、Cookieを使ったwebサイトの制作に非常に苦労しました。

今回はjQueryでCookieを活用する際の基本的なコーディングとサンプルサイトを制作しましたので紹介いたします。

この記事でわかること

jQueryでCookieを扱う場合のコーディング内容

そもそもCookieとは

Cookie（クッキー）は、Webページなどでブラウザに情報を保存するための仕組みの1つです。

Cookieによって、訪問したWebサイトの情報が一時的にブラウザに蓄積されます。

Cookieを活用できる場面

主に活用されている点は以下です。

・ログイン情報を保存し、ログイン状態を維持

・現在地に合わせて情報提供が可能

・ユーザー情報を取得し、ユーザーごとに適した広告配信

例えば、IDやパスワードの入力が必要なサイトで二度目のサイト訪問以降、自動的に入力されることがあると思います。

一度目に入力したIDとパスワードがCoookieに保存され、二度目以降に訪問した際にCookieのデータを読み出している仕組みがとられています。

またGoogleなどの検索エンジンでは、Cookieを活用してユーザー情報（どのページに何回アクセスしたかを計測）をもとに興味のありそうな広告を表示する仕組みが取られています。

Cookieはwebサイトの閲覧をスムーズにしてくれる重要な技術ですね

jquery.cookie.jsの読み込み方法

jQuetyでCookieを扱う前にjquery.cookie.jsを読み込む必要がありますので読み込みまでの手順を解説します。

① https://github.com/carhartl/jquery-cookie　にアクセス

② githubのページからCode→Download ZIPをクリック

③ ダウンロードしたらZIPファイルを開き、srcフォルダを開く

④ srcフォルダの中にjquery.cookie.jsのコードが入っています。

⑤ 任意の場所にjquery.cookie.jsを保存し、エディタ内に<script src=”jquery.cookie.js”></script>を貼り付ければ使えるようになります。

Cookieの基本的なコーディングを紹介

cookieに保存
$.cookie('name', ‘value’);

Cookieに保存する際は、2つの引数を使います。

第一引数：名前（name）と第二引数：値（value）を保存して使います。

なお、cookieが保存されているか確認する方法は、以下の通りです。

① 検証ツール（Chromeの場合）のApplicationをクリック

② 左側のCookiesの下のhttp〜 を押すとNameとValueに保存されたデータを確認することができます。

cookieを取得
$.cookie('name');

Cookieを取得する場合は、第一引数のみ指定します。

cookieを削除
$.removeCookie('name');

Cookieを削除する場合も、第一引数のみ指定します。

サンプルサイトの紹介

サンプルサイト

cookieの活用場面：画面をリロードしてもリロード前の状態に戻す。

順を追って説明します。

① 通常時（画面を開いた時）

② フルーツの画像をクリックすると画像が拡大＆右下の金額が反映されます。

③ Cookieに画像拡大されたフルーツと金額を保存

④ 画面をリロードした際、Cookieに保存したデータを読み出し、クリックしたフルーツの画像と金額がそのまま維持されます。

サンプルサイトのコーディング内容

サンプルサイト

'use strict';

//必要な変数を宣言

var cart = new Array($('.item').length);
var sum = 0;
var sumPrice = Number(sum);

//果物の画像をクリックした時、金額を計算する処理

function test(item_num, item_class) {
    var unitPrice = Number(item_class.dataset.price);

    if (cart[item_num] === 0) {
        sumPrice += unitPrice;
        cart[item_num] = 1;

        //cookieの名前(Name)にアイテム番号、値(Value)にonを保存

        $.cookie('item' + item_num, 'on');
    } else {
        sumPrice -= unitPrice;
        cart[item_num] = 0;

        //cookieの名前(Name)にアイテム番号、値(Value)にoffを保存

        $.cookie('item' + item_num, 'off');
    }

    document.getElementById('price-notax').textContent = sumPrice + "円";
    document.getElementById('consumptionTax').textContent = sumPrice * 0.1 + "円";
    document.getElementById('priceWithTax').textContent = sumPrice + sumPrice * 0.1 + "円";

    //cookieの名前(Name)にprice、値(Value)に変数sumPriceを保存

    $.cookie('price', sumPrice);
}

//画像をクリックした時、画像を拡大する処理

$('.check').on('click', function() {
    if ($(this).hasClass('nowSelect')) {
        $(this).removeClass('nowSelect');

    } else {
        $(this).addClass('nowSelect');
    }
});

//画面読み込み時の処理

window.onload = function() {

    //priceOnloadにcookieの名前(Name)Priceの値を代入

    var priceOnload = $.cookie('price');
    if (priceOnload == null) {
        priceOnload = 0;
    }

    sumPrice = Number(priceOnload);

    document.getElementById('price-notax').textContent = sumPrice + "円";
    document.getElementById('consumptionTax').textContent = sumPrice * 0.1 + "円";
    document.getElementById('priceWithTax').textContent = sumPrice + sumPrice * 0.1 + "円";

    for (let i = 0; i < $('.item').length; i++) {
        cart[i] = 0;

        //cookieのitem番号の値（Value）がonの場合

        if ($.cookie('item' + i) === 'on') {
            $('.check').eq(i).addClass('nowSelect');
            cart[i] = 1;
        }
    }
}
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>テンプレート</title>
    <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
    <link rel="stylesheet" href="css/special.css">
</head>

<body>
    <header>
        <div>
            <h1>Shopping List</h1>
        </div>
    </header>
    <main>
        <div class="container">
            <div class="item" data-price="100" onclick="test(0,this);">
                <img src="images/grapefruit.jpg" alt="" class="check">
                <p>グレープフルーツ 100円</p>
            </div>
            <div class="item" data-price="90" onclick="test(1,this);">
                <img src="images/kiwi.jpg" alt="" class="check">
                <p>キウイ 90円</p>
            </div>
            <div class="item" data-price="70" onclick="test(2,this);">
                <img src="images/mandarin orange.jpg" alt="" class="check">
                <p>みかん 70円</p>
            </div>
            <div class="item" data-price="150" onclick="test(3,this);">
                <img src="images/peach.jpg" alt="" class="check">
                <p>桃 150円</p>
            </div>
            <div class="item" data-price="110" onclick="test(4,this);">
                <img src="images/strawberry.jpg" alt="" class="check">
                <p>いちご 110円</p>
            </div>
            <div class="item" data-price="200" onclick="test(5,this);">
                <img src="images/melon.jpg" alt="" class="check">
                <p>メロン 200円</p>
            </div>

            <table>
                <tr>
                    <th>税抜合計金額</th>
                    <td id="price-notax">0円</td>
                </tr>
                <tr>
                    <th>消費税</th>
                    <td id="consumptionTax"></td>
                </tr>
                <tr>
                    <th>税込合計金額</th>
                    <td id="priceWithTax"></td>
                </tr>
            </table>
        </div>
    </main>
    <footer>
        <p>jquery.cookie.js Sample</p>
    </footer>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="jquery.cookie.js"></script>
    <script src=" script.js "></script>

</body>

</html>
@charset "UTF-8";
main .container {
    margin: 0 auto;
    max-width: 1000px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.item {
    height: 200px;
    width: 200Px;
    margin: 40px;
}

.item :last-child {
    margin-right: 0;
}

.item img {
    height: 150px;
    overflow: hidden;
    border: solid 0.5px rgb(228, 224, 224);
    border-radius: 50%;
}

.item :hover {
    opacity: 0.6;
}

.item p {
    text-align: center;
}

table {
    width: 100%;
    margin-right: 200px;
}

tr {
    text-align: right;
}

.nowSelect {
    transform: scale(1.2, 1.2);
    transition: 0.5s all;
}

おわりに

今回は、「【コピペOK】Cookie利用を簡単に！コーディングを解説（jquery.cookie.js利用）」について紹介しました。

今回の記事があなたの役に立ったら幸いです。

今後も最新の情報を見逃さないために本ブログをブックマークよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です