cookieを使ったいいね機能を初めて実装してみた。jquery.cookie.js

これまで自分が作ってきたいいね機能といえば、データベースにLikeテーブルを作ってどのユーザーがどの投稿にいいねしたかでいいねを実装していた。 課題として与えられたいいね機能はユーザテーブルはなく、のいいね機能だった為、cookieを使ったいいね機能の実装をした。

jquery.cookie.jsを使うとあっという間だった。

まず、CDNでjquery.cookie.jsを読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

そして以下がコード

$('.like').on('click',function(){
    //cookieのNameに投稿のID Nameに'liked'を追加　有効期限は365日に設定　365日をすぎると、cookieが消去される　違う画面(URL)でもこの機能を使いたいので、pathを'/'に設定
    $.cookie($(this).attr("id"),"liked",{expires: 365,path:'/'});
　//いいねボタンを押したら、fontを変えるためclassを追加
    $(this).addClass('is-active');
    return false;
});

詰まったとこ

・(this)を使っていなかったため、いいねを押すと、そのページの全投稿にいいねが押される状態になってた。 おそらく、どのボタンをクリックしたのかを判断できていなかったから。

・idに一意な名前をつけてなかった。僕の場合、class名とid名が同じになっていて、しかもidでクリックイベントを発生させていた為、挙動がうまく行かなかった。 なので、idを一意な名前にし、classでイベントを発生させるようにした。これは同期の方から教えてもらいました。