JsでCookieを利用したいいね機能

この記事は約4分で読めます。
スポンサーリンク

一日一回ボタンを押せるといった機能をjavascriptつけることがあったのでそのメモ。
Cookieで制御しているため、Cookie消せば何度でも投票できるけれど、それはサーバー側でIPなどで弾くしかないかな。
って感じなので、そこを考えない簡単なプログラム

表にボタンを設置する


<button type="button" class="like_button" data-id="1">いいね!</button>
<button type="button" class="like_button" data-id="2">いいね!</button>

まずボタンを押したらCookieを保存するjavascript

    function cookiesave() {
//ボタンを押したらdisabledにして押せなくする
        $(this).prop("disabled", true);
//cookieの有効時間指定
        var date = new Date();
        var expire = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
        document.cookie = 'likeid_'+ $(this).data('id') +'=1; path=/; expires=' + expire.toUTCString();
        var self = this;
//php側でデータを保存する
        $.ajax({
            type: 'POST',
            url: '/post.php',
            data: {
                id: $(this).data('id')
            }
        }).done(function (data) {
//押した後の動作
            after_like(self);
        }).fail(function (data) {

        });
    }
    //ボタンにイベントを付ける
    $('.like_button').on('click', cookiesave);

後で使うので関数にしておく

    function after_like(self) {
//ボタンをdisabledにして押せないように
        $(self).prop("disabled", true);
    }

次ページに訪れた際に押せなくする、状態を更新するための処理

//Cookieが保存されているか調べる
    var target_cookie = function (self) {
        var name = 'likeid_'+$(self).data('id');
        var result = null;
        var cookieName = name + '=';
        var allcookies = document.cookie;
        var position = allcookies.indexOf(cookieName);
        if (position != -1)
        {
            var startIndex = position + cookieName.length;
            var endIndex = allcookies.indexOf(';', startIndex);
            if (endIndex == -1)
            {
                endIndex = allcookies.length;
            }
            result = decodeURIComponent(
                    allcookies.substring(startIndex, endIndex));
        }
        return result;
    };

    //ボタンに状態を反映させる
    $('.like_button').each(function () {
            if (target_cookie(this) == 1) {
        after_like(this);
    }
    });

コメント

タイトルとURLをコピーしました